Возможность выбора нескольких категории Vue JS?

Question

[Insane06]

Доброго времени суток!

Имеется на сайте список такого вида:

Данные возвращаются в 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>

В первый раз пользователь выбирает несколько категории и сохраняет их. Соответственно нужно выводить их уже активными. Как это реализовать?

Comments

[Сергей Герасимов]

Если я правильно понимаю, то user-categories должен вам возвращать массив id категорий и всё должно отрабатывать. Если возвращаются категории целиком, тогда в chosen надо пушить только id

Answer 1

[Артур]

Если правильно понял задачу вам нужно это https://laravel.com/docs/5.8/eloquent-relationship...

Comments

[Insane06]

Нет, мне нужно именно со стороны VUE реализовать чтобы выбранные категории, которые подтягиваются с базы здесь: axios.post('user-categories'). Были зелеными сразу при загрузке.

[Артур]

ну после получения категорий пользывателя добавьте класс у которого нужный вас стили

[Insane06]

Вопрос в том как это сделать, потому что для того чтобы отработка была по клику, у меня задан метод. Я вот и не знаю как сделать это, не так давно во vue

[Артур]

у вас есть список категорий и ид категорий юзера, во время вывода добавляете проверку если ид категории имеется в списке категорий юзера добавляем класс к элементу дальше к этому классу добавляем стили

[Insane06]

Артур, можете реализовать исходя из того что я выложил выше, просто вообще никак не полуается сделать((

[monsteruy]

Можно более подробна ответить как делать категории