I am working on a Vue component where I need to select a specific value from an array of objects and then copy certain fields from that value into Vue data.
<div class="container">
<h4>Add Item</h4>
<form @submit.prevent="addItem(item.Code)">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ItemCode">Code</label>
<select
id="ItemCode"
v-model="item.Code"
>
<input
v-model="item.Code"
type="hidden"
>
<option
v-for="part in PartCodes"
:key="part"
>
{{ part }}
</option>
</select>
.
.
.
</form>
</div>
Here is the data structure:
data() {
return {
item: {},
parts: [],
};
},
computed: {
PartCodes: function () {
return [...new Set(this.parts.map(p => p.Code))];
},
},
created() {
let uri = '/parts';
if (process.env.NODE_ENV !== 'production') {
uri = 'http://localhost:4000/parts';
}
this.axios.get(uri).then(response => {
this.parts = response.data;
});
},
methods: {
addItem(selectCode) {
let uri = '/items/create';
if (process.env.NODE_ENV !== 'production') {
uri = 'http://localhost:4000/items/create';
}
let selectPart = this.parts.filter( obj => {
return obj.Code === selectCode;
});
this.item.Description = selectPart.Description;
this.item.Cost = selectPart.Cost;
this.item.Price = selectPart.Price);
this.axios.post(uri, this.item)
.then(() => {
this.$router.push({name: 'QuoteIndex'});
});
}
}
};
Although the object 'selectPart' logs the correct fields, assigning these fields to the 'item' object results in 'undefined' values.
I believe I am facing a scope issue, but I am unsure of what exactly is causing the problem.
Any suggestions on how to properly copy fields within this Component would be greatly appreciated.
Thank you. https://i.sstatic.net/ESjUf.png