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

【问题标题】：How to use v-for from computed property?如何从计算属性中使用 v-for？
【发布时间】：2021-06-18 21:19:38
【问题描述】：

我有一个组件，我使用 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
    }

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

【问题讨论】：

您是否尝试过使用 log 或 devtool 查看发生错误时的行是什么样的？
在您计算的rows、isTrue 和isFalse 都是undefined。所以this.rows 将永远是this.array。另一件需要注意的是，在 computed 属性中改变组件数据是 Vue 中的一种反模式。 computed 属性是对同一数据的不同视图。当数据发生变化时，它们会自动更新，但它们本身不应该发生变化。
isTrue 和 isFalse 都是数据属性，我没有把它们放在示例代码中，我的错。我认为评论的最后一部分是问题，当我拖动一个元素时，行会给出不同的输出，而 vue 不理解那部分
你应该用 this.isTrue 和 this.isFalse 引用它

标签： javascript arrays vue.js vuejs2 v-for

【解决方案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 example

【讨论】：