In my jsbin here http://jsbin.com/fecukitisu/edit?html,js,output. My total, and tax bindings are working until a user adds a new 'sale' via the included button. I cannot figure out why the computed functions return NAN when another sale is added. Any help is much appreciated!
It looks like an error with the return value of your component's data function. You have the "sale" property set to an array of objects. It should just be an object.
Change this:
data: function() {
return {
tip: 8.50,
sale: [
{ price: '' },
{ desc: '' },
{ amount: '' }
]
};
}
To this:
data: function() {
return {
tip: 8.50,
sale: {
price: '',
desc: '',
amount: ''
}
};
}
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
},
I have the following state:
users: {
'user-0': {
id: 'user-0',
title: 'Bob'
},
'user-1': {
id: 'user-1',
title: 'John'
},
...
I would like to change user-1's id by user-12 for example:
users: {
'user-0': {
id: 'user-0',
title: 'Bob'
},
'user-12': {
id: 'user-12',
title: 'John'
},
...
What is the easiest way to do that with the reducer ?
I was thinking about copying the user-1 data to a new entry by changing the ids, but is there a better way?
Without mutating data:
let data = {
users : {
'user-0': {
id: 'user-0',
title: 'Bob'
},
'user-1': {
id: 'user-1',
title: 'John'
},
'user-2': {
id: 'user-2',
title: 'Bohn'
}
}
}
let dataCopy = {
...data,
'users' :{
...data.users,
'user-12' : {
...data.users['user-1'],
id: 'user-12'
}
}
}
delete dataCopy.users['user-1'];
You need to make a deep copy of your object and only change that copy's properties. Do not mutate the original object. I am using spread operator and delete
Remember this is assuming your users follow the same structure.
First Copy user-1 data and add a new key user-12 and set its value as user-1. then update the id property of user-12 and remove user-1 key from the state.
users["user-12"] = {...users["user-1"], id:"user-12"};
// remove user-1 key from users state
delete users["user-1"]
[Noob to Javascript and React] I am using an API that returns an object with values like this. AAPL, AMZN, FB, GOOGL, can be anything based on the function's string array input.
{
AAPL: { price: 329.99 },
AMZN: { price: 2563.05 },
FB: { price: 239.93 },
GOOGL: { price: 1469.12 }
}
How could I consider dynamically mapping a response like this into a state object like this? The id property doesn't exist, it needs to be created.
state = {
stocks: [ { id: 1, name: 'AAPL', price: 329.99 }, { id: 2, name: 'AMZN', price: 2563.05 }, ...]
}
I'm able to successfully print the stock names and their prices separately but I am having trouble figuring out how I could wire them into a state object like what's above.
function getCurrentPriceOfBatchStocks(_stocks) {
iex
.symbols(_stocks)
.price()
.then(res => {
console.log(typeof res);
console.log(res);
console.log(Object.keys(res));
console.log(Object.values(res));
});
}
Not sure where you're getting id from, so I'm using idx as an example.
const stocks = Object.keys(resp).map((key, idx) => ({ id: idx + 1, name: key, price: resp[key] }))
Here is an implementation. With Object.entries, you get an array with an array of [key, value] of your original object. And you can map this array to a different format.
You can check the result with the Run code snippet button.
let st = {
AAPL: { price: 329.99 },
AMZN: { price: 2563.05 },
FB: { price: 239.93 },
GOOGL: { price: 1469.12 }
}
let stocks = Object.entries(st).map(([key, value], index) => ({id: index + 1, name: key, price: value.price}))
console.log(stocks)
const res={
AAPL: { price: 329.99 },
AMZN: { price: 2563.05 },
FB: { price: 239.93 },
GOOGL: { price: 1469.12 }
}
console.log(Object.entries(res).map((entry,index)=>{
return {
id:index+1,
name:entry[0],
...entry[1]
}
}));
I have a complex structure and I want to omit some properties from this structure for final value
let ListofWorlds = {
listOfCountries: [{
add: [{
id: 1,
updated: {
areacode: 123,
city: {
city: {'Austrailia'},
houses: {1000}
}
}
}], remove: []
}]
}
I want to omit city property from this structure and need this
let ListofWorlds = {
listOfCountries: [{
add: [{
id: 1,
updated: {
areacode: 123
}
}], remove: []
}]
}
This is what I have tried
let newListOfWorls = _.map(ListofWorlds, function (worlds) {
return _.omit(worlds, ['city']); })
Appreciate the help and knowledge
This is what i have tried.
let ListofWorlds = {
listOfCountries: [{
add: [{
id: 1,
updated: {
areacode: 123,
city: {
city: 'Austrailia',
houses: 1000
}
}
}], remove: []
}]}
const newList = ListofWorlds.listOfCountries.map(arr=>{
arr.add.forEach((item,index)=>{
arr.add[index] = _.omit(item,'updated.city')
})
return arr
})
Probably not the best way to do it, but hey it works, and why your code doesn't work probably you mapped an Object ListofWorlds and you need to be specific which field you want to be omitted
I am trying to update a collection by pushing to an already existing array in the collection.
Here is the update function I am trying to run:
Games.update({ _id: game._id }, {
$push: { players: { name: playerName } },
});
Here is the error I am getting in the console:
update failed: MongoError: Cannot update 'players' and 'players' at the same time
Relevant schemas:
Player = new SimpleSchema({
name: {
type: String,
label: 'name',
max: 50,
},
});
Schemas.Game = new SimpleSchema({
...
players: {
type: [Player],
label: 'Players',
autoValue: function () {
return [];
},
},
});
I am using the autoValue for the players array to sort of initialize it when a new game is created. Could this be a problem for when the first player is added?
Some help would be appreciated.
Edited: #Logiwan992 try using defaultValue instead of autoValue.I believe you're using autoValue to set the value of players so it isn't undefined. But with your implementation, autoValue would run when there is an update on your document.
defaultValue would run when the document is created first. But if you still choose to use autoValue, you may also want to check if it's an update and return undefine. As in this
players: {
type: [Player],
label: 'Players',
autoValue: function () {
if (this.isUpdate) {
return undefined;
}
return [];
},
},
Returning undefined would ensure the new update value is used.
My recommendation though is to use
players: {
type: [Player],
label: 'Players',
defaultValue: [],
},