1

Я пытаюсь подключить vue draggable к своему Vue Cli проекту. Пытаюсь реализовать возможность перетаскивать записи между двумя массивами(и внутри самих массивов). Они одинаково обьявлены, одинаково получаются в компоненте, и одинаково выводятся, но почему-то один компонент работает, а другой выдает ошибку Computed property "completes" was assigned to but it has no setter. при попытке перетащить элемент. Я так понимаю, проблема в том что я не использовал сеттер вроде такого, но ведь я его не использовал и в categories,но при этом этот массив отлично меняется. Подскажите, из-за чего такое происходит?

computed: {
  completes: {
    get: function () {
     return this.$store.state.completes; 
    },
    set: function (newValue) {
        ////////
    }
  }
}

Обьявление во Vuex store

completes : [],
categories : {name: 'Важно', list : []},{name: 'Срочно', list : []}]

Далее я получаю эти переменные в разных компонентах computed: {categories() {return this.$store.state.categories;}} computed : {completes() {return this.$store.state.completes;}}

После чего я вывожу их Completes

  <ol >
            <draggable group="todo" v-model='completes'  >
            <li v-for = "(item,index) in completes" :key = 'index'>
            <div>
                <h3>{{item.title}}</h3>
                <p>{{item.text}}</p>
            </div>
            <button class="end_task" @click = '$store.commit("deleteTask",{category:{},item, type :"ended"})' type="button">Удалить</button>
            <p>Завершено {{item.timeLeft}}</p>
        </li>
            </draggable>
        </ol>

Categories

<ul>
            <li  v-for = '(category,index) in categories' :key="index"  v-show="category.list.length > 0">
                <ul class="category" v-if="category.list">
                    <div>
                        <h3>{{category.name}} </h3>
                        <span :class="`${category.opened ? 'opened' : ''}`" class="toggle_view"></span>
                    </div> 
                    <draggable style="flex-direction: column" group="todo" v-model='categories[categories.indexOf(category)].list'>
                    <li  v-for = '(item,index) in category.list :key="index">
                        <div @click="$store.commit('expandView',{category,item})">
                            <h3>{{item.title}}</h3> <span class="toggle_task"></span>
                            <p>{{item.text}}</p>
                        </div>
                        <button class="end_task" @click = '$store.commit("endTask",{category,item})' type="button" name="button">Завершить</button> 
                    </li>
                    </draggable>

                </ul>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.