Check out my fiddle:
https://jsfiddle.net/jqumt5oy/
I'm using a simple array to populate my table:
data: {
groceries: [
{ description: 'Chicken', price: 1, number: 4, selected: true },
{ description: 'Beef', price: 2, number: 0, selected: false },
{ description: 'Beer', price: 3, number: 2, selected: true },
{ description: 'Milk', price: 4, number: 0, selected: false }
]
},
How would I update the number of a row to zero when deselecting a checkbox? So when I want to leave something out of my list, I just have to deselect it, instead of first manually updating the number to 0?
I'm going to guess I would need a function for that, or can it be done easier by binding another v-model to the select menu for example?
Fixed it using a method:
<input type="checkbox" v-model="grocery.selected" #click="selectNumber(grocery)">
methods: {
selectNumber: function(grocery) {
if(grocery.selected == true)
{
grocery.number = 0;
grocery.selected = 0;
}
}
}
If anyone has a better solution, please feel free to post one.
Related
In my Vue/Nuxt project I have a form where the user can add update dynamic fields to be used in a price offer calculation.
When the form loads there will be created one field with the beforeMount lifecycle, and the user can then choose to create one or more extra fields.
in my data return I have this:
data() {
return {
calculationFields: { qty: 0, price: 3.86, selected: false },
}
}
And when the user click the "Add field" button the addField method is called:
addField() {
this.$store.dispatch('quantity/updateAdd', this.calculationFields)
},
where the updateAdd actions calls the UPDATE_ADD_ITEM mutation
UPDATE_ADD_ITEM(state, value) {
state.options.push(value)
},
value is { qty: 0, price: 3.86, selected: false }
this works fine as the options array is updated with the new field object
In the template I loop on this array to output X number of fields
<div v-for="(field, index) in getCalculationFields()" :key="field" class="flex-xs justify-between calculation-field">
<InputCustomPlaceholder type="number" :is-required="true" :input-id="`calculation-${index}`" :input-name="`calculation-${index}`" label-text="" placeholder-text="Add pieces" custom-placeholder-text="pcs" extraclass="flex-1 no-margin" />
×
</div>
My problem now is, that I can't figure out how I can use v-model on each dynamically created input fields so that I can update the qty value in the field object in the options state.
So if the list contains three fields like:
[
{ qty: 0, price: 3.86, selected: false },
{ qty: 0, price: 3.86, selected: false },
{ qty: 0, price: 3.86, selected: false }
]
So when the use in field number 2 input 200 as quantity the array will look like this:
[
{ qty: 0, price: 3.86, selected: false },
{ qty: 200, price: 3.86, selected: false },
{ qty: 0, price: 3.86, selected: false }
]
I believe I have to use something like
<InputCustomPlaceholder type="number" :is-required="true" :input-id="`calculation-${index}`" v-model="updateOptionList" :input-name="`calculation-${index}`" label-text="" placeholder-text="Add pieces" custom-placeholder-text="pcs" extraclass="flex-1 no-margin" />
But what is the best what to find the index of the field and update the value in that index on the array.
In a non-dynamic input I use something like this:
v-model="updateFieldOne"
updateFieldOne: {
set(value) {
this.$store.dispatch('fields/updatePartDimeWidth', value)
}
}
which works as intended.
You can give index props, and use it in mutation. EDIT_ITEM mutation help for edit item if you want add new elemenet use state.options.push(value).
this.$store.dispatch('fields/updatePartDimeWidth', {value ,index})
EDIT_ITEM(state, {value ,index }) {
state.options[i] = value
},
There are many array levels, that's why I can't choose the right field, I guess.
This is the Schema of the model:
{
season: 1,
finished: 0,
Games: [{
Game: [{
game: 1,
Players: [{
Id: 0,
name: "Peter",
jails: 3, //I want to change this value
pays: 1000,
gets: 2000,
points: 3
}]
}]
}]
}
I tried this query but it's not working:
Seasons.update({
season: 1,
game: 2,
Id: 0
}, {
jails: 4
},
(err, data) => {
if (err) {
console.log(err)
} else {
console.log(data)
}
}
)
I have used the $set propery but it didn't work as I want. It make changes all jails field of all players to same value in the same season. I mean, the query is selecting the most parent record, so it is the season record. But I want to change value of child element.
Hola Developers im trying to create a product in my shopping card , but still im stacked in one issue :
Can't find the proper way to design a object just on the same way i receive it from my json (back-end).
Lets say the part is causing the issue is this:
JSON RECEIVED
"product_category": [
{
"categories_of_product": "Good"
},
{
"categories_of_product": "Danger"
},
{
"categories_of_product": "Homer"
}
],
"people_buying_this_product": "Jack Ripper"
},
]
then on my building-product-processs , on the data return is a section that have to do with this, where in then using checkboxes i get which checkbox is checked or not , in order to build a array of categories similar to the former one i have shown:
DATA RETURN
ProductAdded: {
description: "",
upload_image3: "",
upload_image2: "",
upload_image1: "",
unities: 0,
price: 0,
name: "",
Categories: [
{ id: 1, value: "Miscellaneous", selected: false },
{ id: 2, value: "Homer", selected: false },
{ id: 3, value: "Electronic", selected: false },
{ id: 4, value: "Internet", selected: true },
{ id: 5, value: "Kids", selected: false },
{ id: 6, value: "Donas", selected: true },
{ id: 7, value: "Sports", selected: true },
{ id: 8, value: "Horror", selected: false }
],
METHOD that dispatches de action in vuex
addProductOnSale(thisCurrent) {
this.$store.dispatch("addProductSale", this.ProductAdded);
}
then being already in the VUEX state management , on the action in fact , trying to build the new product for this product category, i set this:
addProductSale({commit,getters},currentProduct){
product_category: currentProduct.Categories.filter(option =>
option.selected).map(option => {categories_of_product: option.value})
}
------------------->this one gives me undefined like:
"product_category":
[
undefined
],
"product_category":
[
undefined
],
"product_category":
[
undefined
],
]
or tried this other :
addProductSale({commit,getters},currentProduct){
product_category:currentProduct.Categories.forEach( option.selected,() =>
option.value).map(option => option.selected),...
}
and gave me error , not even showing a result.
Basically cant find the way to design the same structure im receiving for json , nor even reaching to values.
Is weird ,but if i only set the query like this:
addProductSale({commit,getters},currentProduct){
product_category:currentProduct.Categories.filter(option => option.selected)
}
Indeed filters and gives back the objects inside Categories which commit the condition of selected true , but with its plain format just as the data returns , but that's not the idea.
Any advice or help?
Thanks in advance!!!!
This question is the same as asked here, but the only answer is something I had already tried by following the docs to no avail. I need to access 4 levels deep of pages. I currently have the following included in my lib/modules/apostrophe-pages/index.js:
addFields: [
{
name: '_pages',
type: 'joinByArray',
withType: 'apostrophe-page',
label: 'Pages',
idsField: 'pageIds',
filters: {
children: {
depth: 4,
areas: false
},
projection: {
title: 4,
slug: 4,
rank: 4,
level: 4,
path: 4
}
}
}
]
I even tried passing '1' as it says to do in the docs and still only returns an empty array under the "_children" key when logging out data.
and I have the following in my app.js file:
'apostrophe-pages': {
filters: {
ancestors: {
children: {
depth: 4
}
},
children: {
depth: 4
}
},
No matter what it's still empty. How can I get the _children key to populate accurately as my navigation tree shows?
I have a block of JSON data looking like this:
{
date: '2014-01-01',
data: [
{
name: "Janos",
work: 3,
drive: 5
},
{
name: "Jelle",
work: 4,
drive: 2
}
]
}, {
date: '2014-01-02',
data: [
{
name: "Janos",
work: 3,
drive: 5
},
{
name: "Jelle",
work: 4,
drive: 2
}
]
}, {
date: '2014-01-03',
data: [
{
name: "Janos",
work: 3,
drive: 5
},
{
name: "Jelle",
work: 4,
drive: 2
}
]
}, {
date: '2014-01-04',
data: [
{
name: "Janos",
work: 3,
drive: 5
},
{
name: "Jelle",
work: 4,
drive: 2
}
]
}
And I want a line chart with an x axis based on the date key, and columns based on the given names in the data arrays for each item.
So for each person I want to show the work and drive value.
This is what I'm trying to achieve (in case I don't make any sense):
Achieved this screenshot by using inspect element
I hope my question makes sense, I can't seem to make it work with the available documentation.
Please leave a comment if I'm not clear enough.
Thanks in advance!