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

Posted 2023-02-16

【中文标题】如何从计算属性中使用 v-for？

【英文标题】：How to use v-for from computed property?

【发布时间】：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 引用它

【参考方案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