javascript 带参数的计算属性可以工作，但不是在vuejs中建议的方法？那么还有什么其他可用的选项呢？

0s0u357o 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(93)

我有一个列表中有v-for的组件，我想在列表中有变化时检查该组件是否选中，并更新选中状态。

// This works but not the suggested way to do it.
const list = computed(() => (value) => {
  return array.value.find((item) => item.id === value)
})

// Component inside template
<somecomponent v-for='item in Items' :checked='list(item.id)' />

JavaScript

来源：https://stackoverflow.com/questions/75553179/computed-property-with-arguments-works-but-not-a-suggested-way-to-do-it-in-vuejs

2条答案

按热度按时间

mznpcxlj1#

为了达到这个目的，我添加了一个计算属性，返回一个包含id的数组，如果它们被选中，然后使用包含来检查id是真还是假。
这里的Items和array都有不同的值和相同的id，所以不能直接与include比较。

const checkedList = computed(() => {
 const list = [];
 Items.value.forEach((item) => {
    array.value.find((value) => {
      if(value.id === item.id){
        list.push(item.id);
      }
    })
 })
 return list;
})

// Component inside template
<somecomponent v-for='item in Items' :checked='checkedList.includes(item.id)' />

当checkedList在值改变时更新时，传递给组件的值也会被vue更新。

赞(0）回复(0）举报 2023-02-28

k3bvogb12#

您可以使用array.some()来实现这一点：

<somecomponent v-for='item in Items' :checked='array.some(x => x.id === item.id)' :key="item.id" />

那么您可能不需要computed属性，因为array已经是一个ref，因此是被动的。
还建议在v-for循环中始终使用:key。

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 带参数的计算属性可以工作，但不是在vuejs中建议的方法？那么还有什么其他可用的选项呢？

2条答案

相关问题

热门标签

最新问答