Whenever I navigate to the edit page, I expect all my saved product tags to be automatically selected by default.
Currently, only one tag is getting selected and repeated for all the tags I have (example)
https://i.sstatic.net/Bj6Kk.png
Code
HTML
<el-col :span="22">
<el-select
v-model="form.tags"
multiple
filterable
style="width:100%;"
allow-create
default-first-option
placeholder="Choose tags for your product">
<el-option
v-for="item in tagss"
:key="item.id"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</el-col>
<el-form-item label="Categories">
<el-col :span="24">
<el-cascader
v-model="form.categories"
style="width: 100%;"
:options="cats"
:props="{
multiple: true,
checkStrictly: true,
value: 'id',
label: 'name',
}"
clearable
filterable>
</el-cascader>
</el-col>
</el-form-item>
Script
data() {
return {
cats: [],
tagss: [],
form: {
tags: [],
categories: [],
_method: 'PUT',
},
}
},
mounted () {
this.fetchProduct()
this.getData()
},
methods: {
getData () {
axios.get('/api/admin/products', {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('access_token')
}
})
.then(response => {
this.brands = response.data.brands;
this.cats = response.data.categories;
this.tagss = response.data.tags;
})
.catch(function (error) {
console.log('error', error);
});
},
fetchProduct() {
axios
.get('/api/admin/products/'+this.$route.params.id, {
headers: {
Authorization: 'Bearer ' + localStorage.getItem('access_token')
}
})
.then(response => {
this.form.tags = response.data.data.tags
this.form.categories = response.data.data.categories
console.log('all tags from backend: ', this.tagss) // sample data below
console.log('this product tags from backend: ', response.data.data.tags) // sample data below
})
.catch(function (error) {
console.log('error', error);
});
}
}
Here are the sample results of my
console.logmentioned above
https://i.sstatic.net/B86ov.png
Note: Although I discussed the issue with my tags, I am also sharing an example related to my categories code, as both appear to have similar issues.
Do you have any ideas on what could be causing this problem?