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">
Related
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>
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
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>
I'm displaying a list of menus in a table and looping with v-for, i want to set checkbox is checked if "id" from data menus same with "id_menu" from grupMenu, anyone has the same problem, please share it how i can solved, I'm realy new in Vue, thank's for helping,
new Vue({
el: "#app",
data: {
menus: [{
id: 1,
name_menu: "Setting",
parent: 0
},
{
id: 2,
name_menu: "Users",
parent: 1
},
{
id: 3,
name_menu: "Menu",
parent: 1
},
{
id: 4,
name_menu: "Role",
parent: 1
},
],
grupMenu: [{
id: 1,
id_user_group: 1,
id_menu: 1,
role: 1
},
{
id: 2,
id_user_group: 1,
id_menu: 2,
role: 0
},
]
},
methods: {
}
})
.text-center {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<h2>Todos:</h2>
<table border="1">
<thead>
<tr>
<th rowspan="2" style="vertical-align:middle;text-align:center">Menu</th>
<th colspan="3" style="text-align:center">Previlege</th>
</tr>
<tr class="">
<th class="text-center">Insert</th>
</tr>
</thead>
<tbody>
<tr v-for="menu in menus" :key="menu.id">
<td v-if="menu.parent == 0" style="color:blue">
<input type="checkbox">
<!-- <input type="checkbox" v-model="checked"> -->
<b class="ml-2">{{menu.name_menu}}</b>
</td>
<td v-else>
<input type="checkbox" class="ml-5"> -- {{menu.name_menu}}
</td>
<td class="text-center">
<input type="checkbox">
</td>
<!-- </div> -->
</tr>
</tbody>
</table>
</div>
here in fiddle
If I understand correctly, you want the checkbox checked for each entry in menu whose id appears as a menu_id in grupMenu.
So write a method like this:
isInGrupMenu(id) {
return this.grupMenu.some((item) => item.id_menu === id);
}
and bind it to the checked attribute of each checkbox:
<input type="checkbox" :checked="isInGrupMenu(menu.id)">
I have a v-for loop that is going to spit out multiple rows of inputs that I would like to save each separate row to an array object dynamically.
v-for:
<table class="table m-0">
<tbody>
<tr v-for="fund in defaultFunds">
<td>
{{fund.name}}
<b-input v-model="newEntries[fund.id]['id']"
:value="fund.id"
name="entryFund"
type="text"
class="d-none"
:key="fund.id" />
</td>
<td>
<b-input v-model="newEntries[fund.id]['amount']"
name="newFundAmount"
id="newFundAmount"
type="text"
placeholder="Amount"
:key="fund.id"/>
</td>
</tr>
</tbody>
</table>
Desired array (using example of entering 2 rows):
newEntries: [
{ id: '1', amount: '50.00' },
{ id: '2', amount: '123.45' }
],
I load newEntries as an empty array by default. I don't know how to get the kind of array object I want with v-for. With the above code I end up with this:
newEntries: [null, '50.00', '123.45']
What am I doing wrong?
Do you want something like this:
https://jsfiddle.net/e6L5seec/
<div id="app">
newEntries: {{ newEntries }}
<table>
<tr v-for="(fund, index) in defaultFunds">
<td>{{ fund.name }}</td>
<td>
<input v-model="newEntries[index].id"
name="entryFund"
:value="fund.id"
type="text" />
</td>
<td>
<input v-model="newEntries[index].amount"
name="entryFund"
type="text" />
</td>
</tr>
</table>
</div>
new Vue({
el: "#app",
data: function() {
return {
defaultFunds: [
{
id: 0,
name: 'fund 0'
},
{
id: 1,
name: 'fund 1'
}
],
newEntries: [{}, {}]
}
},
methods: {
}
});