javascript - 如何从计算属性中使用 v-for？

Question

我有一个组件，我使用 v-for 迭代一个可拖动的 JS 组件

<div v-for="(val, index) in rows" :key="index"><draggable></draggable/></div>

我的 rows 计算属性返回一个数组数组。数组是我使用 v-model 从父级接收的属性。

  props: {
    array: {
      type: Array,
      required: false,
      default: null
    }
  },
  computed: {
    rows () {
      if (isTrue) {
        const arr = this.array.map((v) => v.slice())
        const temp = doSomething(arr)
        return temp
      } else if (isFalse) {
        const arr = this.array.filter(elm => elm.length)
        return arr
      }
      return this.array
    }

但是我收到一个错误：'Cannot read property 'Sortable1616400528253' of null' 当我更改数组的行时，我没有收到错误，但结果错误，这意味着行出现问题。有什么建议么？

标签： javascriptarraysvue.jsvuejs2v-for

Answer 1

对于 v-model，您需要一个满足 get 和 set 操作的属性。组件道具需要不可变的转换。因此，您可以开发类似示例的解决方案。

var bicomponent=Vue.component('biComponent', {
    template: `<div> 
  <draggable v-model="rows">
    <transition-group>
        <div v-for="(item, index) in rows" :key="item.id">
            {{item.text}}
        </div>
    </transition-group>
</draggable></div>`,
  components:{vuedraggable},
  props: {
    todoList: {
      type: Array,
      required: true,
      default: []
    }
  },
  data: function () {
        return {
            rows: this.todoList
        }
    }
});

jsfiddle 示例