我一直在尝试创建一个计算数组，然后使用 v-if 进行渲染。但它也需要与 v-model 一起使用。它需要 v-model 的原因是因为它是使用 vuedraggable 的可拖动列表的一部分。
目前我收到以下错误Computed property "list" was assigned to but it has no setter.
以下代码是我的 drag.vue 组件：
<template>
<div>
<draggable
v-model="list"
v-bind="dragOptions"
class="bigger-area"
@start="isDragging=true"
@end="isDragging=false"
>
<transition-group name="flip-list" type="transition">
<li
v-for="text in list"
:key="text"
id="list1"
class="drag-item flex flex-justify-betweeen"
>{{ text }}</li>
</transition-group>
</draggable>
</div>
</template>
<script>
import draggable from "vuedraggable";
export default {
name: "Drag",
data() {
return {
test: [],
lists: [
{
title: "0-6 months",
correctlyOrderedList: [
"Lifting Head",
"Rolling",
"Sitting (with support)"
]
},
{
title: "6-12 months",
correctlyOrderedList: [
"Crawling on stomach",
"Sitting (without support)",
"Stands with support and walks holding on",
"Rolls a ball"
]
},
{
title: "12-18 months",
correctlyOrderedList: ["Crawling", "Walks alone"]
},
{
title: "18 months – 2 years",
correctlyOrderedList: [
"Walks smoothly and turns corners",
"Walks upstairs with support",
"Begins running"
]
},
{
title: "2-3 years",
correctlyOrderedList: [
"Walks upstairs without support",
"Runs safely",
"Catches using body and arms"
]
},
{
title: "3-4 years",
correctlyOrderedList: ["Kicks a ball forwards", "Can hop on one foot"]
},
{
title: "4-5 years",
correctlyOrderedList: [
"Catches using only their hands",
"Can skip following a demonstration"
]
}
]
};
},
components: {
draggable
},
methods: {
fullArrayMethod() {
//Puts all statements into single array
let i;
let v;
let fullArrayInOrder = [];
for (i = 0; i < this.lists.length; i++) {
for (v = 0; v < this.lists[i].correctlyOrderedList.length; v++) {
fullArrayInOrder.push(this.lists[i].correctlyOrderedList[v]);
}
}
return fullArrayInOrder;
},
disorderedArrayMethod() {
//Randomizes array
let fullArrayInOrder = this.fullArrayMethod();
var copy = [],
n = fullArrayInOrder.length,
i;
// While there remain elements to shuffle…
while (n) {
// Pick a remaining element…
i = Math.floor(Math.random() * fullArrayInOrder.length);
// If not already shuffled, move it to the new array.
if (i in fullArrayInOrder) {
copy.push(fullArrayInOrder[i]);
delete fullArrayInOrder[i];
n--;
}
}
return copy;
},
chunk(array, size) {
const chunked_arr = [];
let index = 0;
while (index < array.length) {
chunked_arr.push(array.slice(index, size + index));
index += size;
}
return chunked_arr;
},
splitArrayFinalProduct() {
let disorderedArray = this.disorderedArrayMethod();
let finalArray = this.chunk(disorderedArray, 3);
return finalArray;
}
},
computed: {
dragOptions() {
return {
animation: 0,
group: "shared",
disabled: false,
ghostClass: "ghost"
};
},
list() {
return this.disorderedArrayMethod();
}
}
};
</script>
上下文：我正在尝试创建一个将多个数组合并为一个的应用程序。随机化数组。然后用户可以把它放回去，然后看看他们是否做对了。