@Insane06

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

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

Имеется на сайте список такого вида:
5cbc590f7323b297574792.png
Данные возвращаются в 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>


В первый раз пользователь выбирает несколько категории и сохраняет их. Соответственно нужно выводить их уже активными. Как это реализовать?
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ответы на вопрос 1
@ART_CORP
Hard work
Если правильно понял задачу вам нужно это https://laravel.com/docs/5.8/eloquent-relationship...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы