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)">
Related
I'm trying to add rows to a table dynamically with a method in nuxt.js, but the prop that I have defined doesn't work...
I receive this error from the console:
Property or method "invoice_customer" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
I'm trying with this template:
<template>
<div>
<h3>Customers</h3>
<input type="text" v-model="search" placeholder="Search for names..." />
<table v-if="customers.length > 0">
<tr>
<th>name</th>
<th>address</th>
</tr>
<tr v-for="customer in customers" :key="customer.id">
<td>{{ customer.name }}</td>
<td>{{ customer.address }}</td>
</tr>
</table>
<div class="center">
<p>Customer</p>
<select v-if="customers.length > 0">
<option v-for="customer in customers" :key="customer.id">
{{ customer.name }}
</option>
</select>
</div>
<table v-if="invoice_customers.length > 0">
<tr>
<th>Id</th>
<th>Amount</th>
<th>Expire Date</th>
<th>Note</th>
</tr>
<tr
v-for="invoice_customers in invoice_customer"
:key="invoice_customers.id"
>
<td>
<input
type="number"
name=""
id=""
v-model="invoice_customer.amount"
/>
</td>
<td>
<b-form-datepicker
id="example-datepicker"
v-model="invoice_customer.expire_date"
class="mb-2"
></b-form-datepicker>
</td>
<td>
<input type="text" name="" id="" v-model="invoice_customer.note" />
</td>
</tr>
</table>
<b-button variant="outline-success" #click="addNewInstallment">+ Add New</b-button>
</div>
</template>
and this is my script:
<script>
export default {
name: "IndexPage",
data() {
return {
selected: "",
customers: [],
search: "",
invoice_customers: [{
id: 0,
amount: 0,
expire_date: "",
note: "",
}],
};
},
props: {
},
async mounted() {
const response = await this.$axios.$get("/api/customers");
this.customers = response.data;
return this.customers.filter((p) => {
// return true if the product should be visible
// in this example we just check if the search string
// is a substring of the product name (case insensitive)
return p.name.toLowerCase().indexOf(this.search.toLowerCase()) != -1;
});
},
methods: {
addNewInstallment() {
this.invoice_customers.push({
id: 0,
amount: 0,
expire_date: "",
note: "",
});
}
}
}
</script>
invoice customer is defined in v-for cycle
You inverted the order in your v-for, it should be
v-for="invoice_customer in invoice_customers"
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">
I am learning Vue.
Now, I am trying to add data with the price and finally, it calculates total price:
Here is the HTML
<div id="app">
<form #submit.prevent="addItem">
<table border="1" cellpadding="10" width="300">
<tr>
<td colspan="2"><strong>Add New Item</strong></td>
</tr>
<tr>
<td>
<input type="text" name="" v-model="newItem" placeholder="Item Name">
</td>
<td>
<input type="number" name="" v-model="newItemPrice" placeholder="Item Price">
</td>
</tr>
</table>
</form>
<br>
<table border="1" cellpadding="10" width="400">
<tr>
<th>Item Name</th>
<th>Item Price</th>
</tr>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.name }}</td>
<td><input type="number" name="" v-model="item.price"></td>
<td><button #click="removeItem(index)">X</button></td>
</tr>
<tr>
<td>Total</td>
<td><strong>{{ total }}</strong></td>
</tr>
</table>
</div>
Here is the Vue Instance:
new Vue({
el : '#app',
data : {
items: [
{ name: 'Rice', price : 12.60 },
{ name: 'Oil', price : 22.00 },
{ name: 'Mango', price : 32.50 },
{ name: 'Orange', price : 42.00 },
],
newItem : '',
newItemPrice : '',
},
computed: {
total() {
var total = 0;
this.items.forEach( item => {
total += parseFloat( item.price );
})
return total;
}
},
methods: {
addItem() {
this.items.push({
name: this.newItem,
price: 0
});
},
removeItem( index ) {
this.items.splice( index, 1 )
}
}
});
You can see it's by default showing item name and price. I want to add new item using the v-model called newItem But It's not adding the new item to the table
BUT
If I remove the Item Price column I mean this line:
<td>
<input type="number" name="" v-model="newItemPrice" placeholder="Item Price">
</td>
then it's adding the new item perfectly :(
can you tell me what's wrong here?
See two issues with the fiddle:
There is no way to submit the form data
When pushing the price field was not added to the object
After fixing both of them it works well in this fiddle.
This happens because of browser implementation. As mentioned in W3C Specs:
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
But in case of multiple elements, the enter keypress does not trigger the form submit and thus you get this behaviour.
To resolve this you can simply use #keyup.enter.prevent="addItem" to listen to the enter keypress on each input and call the addItem() function like:
new Vue({
el: '#app',
data: {
items: [{name:"Rice",price:12.6},{name:"Oil",price:22},{name:"Mango",price:32.5},{name:"Orange",price:42}],
newItem: '',
newItemPrice: null,
},
computed: {
total() {
var total = 0;
this.items.forEach(item => {
total += parseFloat(item.price);
})
return total;
}
},
methods: {
addItem() {
this.items.push({
name: this.newItem,
price: 0
});
},
removeItem(index) {
this.items.splice(index, 1)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="app">
<form #submit.prevent="addItem">
<table border="1" cellpadding="10" width="300">
<tr>
<td colspan="2"><strong>Add New Item</strong></td>
</tr>
<tr>
<td>
<input type="text" name="" v-model="newItem" placeholder="Item Name"
#keyup.enter.prevent="addItem">
</td>
<td>
<input type="number" name="" v-model="newItemPrice" placeholder="Item Price"
#keyup.enter.prevent="addItem">
</td>
</tr>
</table>
</form>
<br>
<table border="1" cellpadding="10" width="400">
<tr>
<th>Item Name</th>
<th>Item Price</th>
</tr>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.name }}</td>
<td><input type="number" name="" v-model="item.price"></td>
<td><button #click="removeItem(index)">X</button></td>
</tr>
<tr>
<td>Total</td>
<td><strong>{{ total }}</strong></td>
</tr>
</table>
</div>
You should put a new line in your form, my suggestion is to put just above the close form tag </form>:
<input type="submit" value="add">
Another fix to do is in your methods addItem()
addItem() {
this.items.push({
name: this.newItem,
price: this.newItemPrice
});
}
Where it is the number 0 you should provide the this.newItemPrice to it work properly.
vue draggable problem when fix first column i can't move column how i can solve this problem
I have a table of 4 columns, one column has a static list of values and the next column I need to be draggable so that I can move the cells in the second column etc without affecting the first column.
<script>
import draggable from 'vuedraggable'
export default {
name: "table-column-example",
components: {
draggable
},
data() {
return {
headers: ["id", "name", "sport"],
list: [
{ id: 1, name: "Abby", sport: "basket" },
{ id: 2, name: "Brooke", sport: "foot" },
{ id: 3, name: "Courtenay", sport: "volley" },
{ id: 4, name: "David", sport: "rugby" }
],
dragging: false
};
}
};
</script>
<style scoped>
.ghost {
opacity: 0.5;
background: #fb1b27;
}
</style>
<template>
<div class="row">
<div class="col-8">
<h3>Draggable table</h3>
<table class="table table-striped">
<thead class="thead-dark">
<draggable :list="headers" v-model="headers" :options="{draggable:'.item'}" tag="tr">
<th>#</th>
<th class="item" v-for="header in headers" :key="header" scope="col">
{{ header }}
</th>
</draggable>
</thead>
<tbody>
<tr v-for="item in list" :key="item.name">
<td>dddddd</td>
<td v-for="header in headers" :key="header">{{ item[header] }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
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: {
}
});