How to get more then one class in vue - vue.js

I'm trying to get more then one class to show depending on what happens. For example if the user clicks on complete then my list is sorted to all the completed items, but what I would also like is that if a user clicks the done button then that item is hidden.
I did try this
<tr v-for="item in filteredItems" :class="[filteredItems.value, hide:item.pending]">
but that didn't work.
Here is my code
<template>
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item" #click="setFilter('incomplete')">Not Complete</li>
<li class="list-group-item" #click="setFilter('complete')">Completed</li>
</ul>
</div>
<div class="col-md-9">
<table class="table table-striped table-sm mt-2">
<thead>
<tr>
<th>Description</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr v-for="item in filteredItems" :class="filteredItems.value">
<td>
{{ item.title }}
</td>
<td>
<button type="button" class="btn btn-success btn-sm" #click="$set(item, 'pending', !item.pending)">Success</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
filter: 'all',
items: [{
id: '1',
title: 'Task 1',
value: "pending"
},
{
id: '2',
title: 'Task 2',
value: "complete"
},
{
id: '3',
title: 'Task 3',
value: "complete"
},
{
id: '4',
title: 'Task 4',
value: "pending"
}
],
pending: undefined
}
},
computed: {
filteredItems() {
if (this.filter === 'all') return this.items;
else return this.items.filter(item => item.value === this.filter);
}
},
methods: {
setFilter: function(filter) {
this.filter = filter;
},
setComplete: function(id){
// console.log('setComplete - '+id);
if(id)
{
// console.log(id);
}
}
}
}
</script>
<style>
.hide{
display: none;
}
</style>

You're very close. Use Object syntax instead of Array syntax in the inline binding.
<tr v-for="item in filteredItems" :class="{myClass: filteredItems.value, hide: item.pending}">
Documentation: https://v2.vuejs.org/v2/guide/class-and-style.html

Related

On click check all checkbox in vue js

I Need to check all dynamic checkbox with vue js anytime user will click button.
Eg: Click on and all checkbox will be selected/deselected
var Records = Vue.component('Records', {
template : `
<button v-on:click="selectAll()" class="btn btn-outline-primary">Select All</button>
<table class="table table-striped table-hover">
<template v-for="(col_name, key) in form_object_keys">
<tr>
<th scope="col"></th>
<th scope="col" v-for="(col, key) in col_name">{{ col }}</th>
</tr>
</template>
<template v-for="(ps, index) in form_object">
<tr>
<td>
<div class="form-check">
<input type="checkbox" :value="form_id" />
</div>
</td>
<td v-for="dato in ps">{{ dato }}</td>
</tr>
</template>
</table>
`,
data() {
return{
title: 'Component Title',
form_id: 10,
form_object: ['item1', 'item2', 'item3'],
form_object_keys: ['key1', 'key2', 'key3'],
selectAll(){
//
}
}
}
});
I've created "selectAll" function which will be engaged by click button
I would keep the selected state in the reactive data as well, and bind the checkbox with v-model: Check this
<script setup>
import { ref } from 'vue'
const form_objects = ref([
{name: "item1", selected: false},
{name: "item2", selected: false},
{name: "item3", selected: true},
{name: "item4", selected: false},
]);
const selectAll = () => {
form_objects.value.forEach((item) => {item.selected = true})
}
</script>
<template>
<button v-on:click="selectAll()">Select All</button>
<div v-for="item in form_objects">
{{item.name}}
<input type="checkbox" v-model="item.selected" />
</div>
</template>

Search input in dynamic table

I'm new to Vue.js, so thanks for the help!!
I'm trying to implement a Search input for each column that filters the results for the user
this is my HTML file:
<div id="table" >
<div class=" container jumbotron mt-3 ">
<enter-data :resources="resources" ></enter-data>
</div>
<div class=" container jumbotron mt-1 ">
<table-list :resources="resources" :heads="heads" ></table-list>
</div>
</div>
And this is my JS file:
Vue.component('table-list', {
props: ['resources', 'heads'],
data () {
return {
selected: [],
selectAll: true,
userIds: [],
searchQuery: ''
}
},
computed: {
filteredResources: function () {
if (this.searchQuery) {
return this.resources.filter(item => {
// return this.item.value.toLowerCase().includes(this.searchQuery.toLowerCase());
// return this.searchQuery.toLowerCase().split(' ').every(v => item.value.toLowerCase().includes(v))
return this.item.FName.startsWith(this.searchQuery)
// return item.indexOf(this.searchQuery)>= 0;
})
} else {
return this.resources
}
}
},
methods: {
sortTable: function (resource) {
this.resources.sort(function (a, b) {
if (a[resource.value] > b[resource.value]) {
return 1
} else if (a[resource.value] < b[resource.value]) {
return -1
}
return 0
})
}
},
template: `
<div class="w-100 text-center d-flex justify-content-center flex-wrap">
<div class="w-75">
<!-- <input type="text" placeholder="search.." v-modle="searchQuery" >-->
<table class="table table-striped">
<thead>
<tr>
<th>
<input type="checkbox">
</th>
<th v-for="resource in heads" class="cursor" #click="sortTable(resource)">
<div />
{{ resource.name }}
</th>
</tr>
</thead>
<tbody>
<tr>
<td />
<td />
<td>
<input v-mode="searchQuery" type="text">
</td>
<td>
<input type="text">
</td>
</tr>
<tr v-for="resource in filteredResources">
<td>
<input type="checkbox">
</td>
<td v-for="column in heads">
{{ resource[column.value] }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`
})
var app = new Vue({
el: '#table',
data: {
resources: [
{ 'id': 0, 'FName': 'Setareh', 'LName': 'Pashapour', 'Extra': 'Alishah' },
{ 'id': 1, 'FName': 'Soheil', 'LName': 'Pashapour' },
{ 'id': 2, 'FName': 'Simin', 'LName': 'Hajizadeh' },
{ 'id': 3, 'FName': 'Nouyan', 'LName': 'Arman' },
{ 'id': 4, 'FName': 'Abed', 'LName': 'Hamrang' },
{ 'id': 5, 'FName': 'Navid', 'LName': 'Ahanj' }
],
heads: [{ name: '#', value: 'id' }, { name: 'First Name', value: 'FName' }, { name: 'Last Name', value: 'LName' }]
}
})
Unfortunately it doesn't work
searchQuery data doesn't have any impact to my filter computed and nothing happend if i type any thing on it
my Any suggestions?
You're using the wrong directive name for form input binding. Change from v-mode to v-model for below line.
<input v-mode="searchQuery" type="text">

Disable/Enable input for each item from a loop VueJS

I try to enable/disable each input from a loop. The problem is that my method it works just after refresh. After I modify something in code and save, then the input works.
<tr v-for="(item, index) in customer_names" :key="item.id">
<td>
<input :disabled="!item.disabled"
v-model="item.name"
type="text"
</td>
</tr>
<div class="edit_mode"
:class="{'display-none':!item.disabled}">
<i class="fa fa-save" #click="disableInput(index)" aria-hidden="true"></i>
</div>
<div class="edit_mode"
:class="{'display-none':item.disabled}">
<i class="fa fa-edit" #click="enableInput(index)" aria-hidden="true"></i>
</div>
props:['customer_names'],
data(){
return{
disabled: [],
}
}
enableInput(index){
console.log('enableInput',this.customer_names[index].disabled);
this.customer_names[index].disabled = false;
},
disableInput(index){
console.log('disabeInput',this.customer_names[index].disabled);
this.customer_names[index].disabled = true;
}
I didn't fully understand your problem. I deduced that you might want to enable or disable the text fields that you create from the data provided. If this is still not what you meant, correct your question by pasting more source code, and explain your problem in more detail.
Vue.component("custom", {
template: "#custom-template",
props: ["customer_names"],
methods: {
enableInput(item) {
item.disabled = false;
},
disableInput(item) {
item.disabled = true;
},
toggleInput(item) {
item.disabled = !item.disabled;
}
}
});
new Vue({
data() {
return {
items: [
{ name: "fus", disabled: false },
{ name: "ro", disabled: false },
{ name: "dah", disabled: true }
]
};
}
}).$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<custom :customer_names="items" />
</div>
<script type="text/x-template" id="custom-template">
<table cellpadding=5>
<tr>
<th>Input</th>
<th>Version 1</th>
<th>Version 2</th>
</tr>
<tr v-for="item in customer_names" :key="item.id">
<td>
<input :disabled="item.disabled" v-model="item.name" type="text" />
</td>
<td>
<button #click="item.disabled = false">E</button>
<button #click="item.disabled = true">D</button>
<button #click="item.disabled = !item.disabled">T</button>
</td>
<td>
<button #click="enableInput(item)">E</button>
<button #click="disableInput(item)">D</button>
<button #click="toggleInput(item)">T</button>
</td>
</tr>
</table>
</script>

How to call method from another component VUE

I have one component
<template>
<div class="section">
<a v-if='type == "events"' class="button is-primary" #click="showForm()">
<i class="fa fa-calendar"></i> &nbsp<span class="card-stats-key"> Add Event</span>
</a>
<a v-if='type == "places"' class="button is-primary" #click="showForm()">
<i class="fa fa-location-arrow"></i> &nbsp<span class="card-stats-key"> Add Place</span>
</a>
<table class="table" v-if="!add">
<thead>
<tr>
<th>
<abbr title="Position"># Client Number</abbr>
</th>
<th>Title</th>
<th>
<abbr title="Played">Status</abbr>
</th>
<th>
<abbr title="Played">View</abbr>
</th>
</tr>
</thead>
<tbody>
<tr v-for="event in events">
<th>{{event.client_number}}</th>
<td v-if='type == "events" '>{{event.title}}</td>
<td v-if='type == "places" '>{{event.name}}</td>
<td>
<p class="is-danger">Waiting</p>
</td>
<td> View </td>
</tr>
</tbody>
</table>
<add v-if="add" v-on:hideAdd="hideFrom()"></add>
</div>
</template>
<script>
import Add from '../forms/AddPlace.vue'
export default {
name: 'Tabbox',
data() {
return {
events: [],
add: ''
}
},
props: ['type'],
created() {
let jwt = localStorage.getItem('id_token')
var ref = wilddog.sync().ref('users').child(jwt).child(this.type);
ref.once("value")
.then((snapshot) => {
this.events = snapshot.val();
}).catch((err) => {
console.error(err);
})
},
methods: {
showForm(add) {
if (this.add == true)
this.add = false;
else {
this.add = true;
}
},
hideFrom() {
this.add = false
console.log('This add is false');
}
},
components: {
Add
}
}
</script>
and another component
<template>
<div class="field is-horizontal">
<div class="field-label">
<!-- Left empty for spacing -->
</div>
<div class="field-body">
<div class="field">
<div class="control">
<button class="button is-primary" v-bind:class="{ 'is-loading': loading } " #click="addPlace()">
Add place
</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
add: false
}
},
methods: {
addPlace() {
this.$emit('hideAdd', this.add)
},
},
}
</script>
How i can calling method from showForm() from first first component in second one! I'm trying to that with $emit function, it doesn't work. And trying with $broadcast, same. How i can use event there?
Add a ref attribute to the child component in the parent component's template like this:
<add v-if="add" v-on:hideAdd="hideFrom()" ref="add-component"></add>
Now your parent component will have access to the child component's VueComponent instance and methods, which you can access like this:
methods: {
showForm() {
this.$refs['add-component'].addPlace();
}
}
Here's documentation on refs.

Data table warning : table id=datatable- request unknown parameter

my problem is, im attached the image, you can understand my problem, im try to fix it, more than 2 hours, i cant fix it, please help me to fix my problem.this is a advance search part of my project.,
enter image description here
<div class="col-md-12">
<div class="col-md-4">
<div class="modal fade" id="mpSrch" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" style="width: 95%">
<div class="modal-content">
<div class="modal-header btn-primary btn-sm" style="height: 40px;">
<button style="margin-top: -10px;" type="button" class="close btn-sm" data-dismiss="modal" aria-hidden="true">×</button>
<h6 style="margin-top: -5px;"><i class="glyphicon glyphicon-search"></i>Good Recieve Note</h6>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="modal-content" style="margin-left: 27px;width: 1250px;padding: 2px;">
<table id="datatable" class="datatableDisplay" font-size:"11pt">
<thead>
<tr>
<th>Id</th>
<th style="width:150px;">GRN No</th>
<th style="width:150px;">GRN Date</th>
<th style="width:150px;">Company Name</th>
<th style="width:150px;">Purchase Order No</th>
<th style="width:150px;">Confirm Status</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<div id="eee">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</div>
</tfoot>
</table>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$(document).on('click', '.selectid', function(e) {
e.preventDefault();
$('#hfRowItem1').val(parseInt($(this).parents('tr').children('td').eq(0).html()));
$('#btnFakeRowClick').trigger('click');
});
$(function Pageload() {
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function() {
$(document).ready(function() {
var dataTableInstance = $('#datatable').DataTable({
"iDisplayLength": 5,
"bStateSave": false,
"oLanguage": {
"sLengthMenu": 'Show <select><option value="5">5</option><option value="10">10</option></select> entries'
},
"bJQueryUI": true,
"bAutoWidth": false,
columns: [{
'data': 'GRNId',
className: 'hide_column'
}, {
'data': 'GRNNo'
},
{
'data': 'GRNDate',
'render': function(jsonDate) {
var date = new Date(parseInt(jsonDate.substr(6)));
var month = date.getMonth() + 1;
return ("0" + date.getDate()).slice(-2) + '/' + ("0" + month).slice(-2) + '/' + date.getFullYear();
}
},
{
'data': 'CompanyName'
}, {
'data': 'PurchaseOrderNo'
}, {
'data': 'ConfirmStatus'
}, {
'data': null,
className: "center",
defaultContent: 'Select',
'width': '5%'
}
],
bServerSide: true,
sAjaxSource: 'GenericHandlers/GoodReceiveNoteDataHandler.ashx'
});
$('#datatable tfoot th').each(function() {
if ($(this).index() != 0 && $(this).index() != 9) {
$(this).html('<input type="text" class="dtSrchCol" placeholder="Search">');
if ($(this).index() == 2) {
$(this).find('input').addClass('datetimepicker');
}
}
});
dataTableInstance.columns().every(function() {
var datatableColumn = this;
$(this.footer()).find('input').on('keyup change', function() {
datatableColumn.search(this.value).draw();
});
});
});
});
});
$(document).ready(Pageload);