Доброго времени суток!
Имеется на сайте список такого вида: 
Данные возвращаются в JSON при запросе на этот же сервер и затем рендерятся во Vue компоненте. <div class="categories">
<a href="#"
class="category"
v-for="(category, id) in categories"
:class="tagClass(category.id)"
@click="selectCategory(category)"
>
{{ category.name }}
</a>
<a href="#" class="category save" @click="saveCategories()">Сохранить</a>
</div>
Скрипт vue: <script>
export default {
data: function(){
return {
categories: [],
chosen: []
}
},
created: function(){
axios.post('get-categories')
.then(({data}) => {
for(var i = 0; i < Object.keys(data).length; i++){
this.categories.push(JSON.parse(JSON.stringify(data))[i]);
}
});
axios.post('user-categories')
.then(({data}) => {
for(var i = 0; i < Object.keys(data).length; i++){
this.chosen.push(JSON.parse(JSON.stringify(data))[i]);
}
});
},
methods: {
selectCategory(cat){
if(this.chosen.includes(cat.id)){
const index = this.chosen.indexOf(cat.id);
if(index >= -1){
this.chosen.splice(index, 1);
}
}else{
this.chosen.push(cat.id);
}
},
tagClass(id) {
const isSelected = this.chosen.includes(id);
return {
'active': isSelected,
'none': !isSelected
}
},
saveCategories() {
axios.post('add-categories', {categories: this.chosen})
.then(({data}) => {
console.log(data);
});
}
}
}
</script>
В первый раз пользователь выбирает несколько категории и сохраняет их. Соответственно нужно выводить их уже активными. Как это реализовать?
Средний
