如何在Vue 3 Composition API中更新React数组中的对象属性

tp5buhyn 于 2023-10-23 发布在 Vue.js

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

我正在使用Composition API处理一个Vue.js 3项目，我有一个包含对象的React数组（使用ref创建）。我想更新这些对象的特定属性，并在属性更改时触发组件的重新呈现。
下面是我的代码的简化版本：

<template>
  <div>
    <div v-for="item in arr" :key="item.id">
      {{ item.name }}
      <button @click="updateName(item)">Update Name</button>
    </div>
  </div>
</template>

<script setup>
import { ref, set } from 'vue';

let arr = ref([
  { id: 1, name: 'Object 1' },
  { id: 2, name: 'Object 2' },
]);

const updateName = (item) => {
  // How can I efficiently update the 'name' property of 'item' and trigger a re-render?
  // So far, to be able to trigger a re-render, I have to re-assign the array value 
  // like so : 
  let row = arr.find(e=>e.id === item.id);
  row.name = 'Object3';
  arr.value = [...arr]; //this line reassigns array value; thus triggers a re- 
                       //render however, for large arrays, this method impacts performance.

};
</script>

感谢你的帮助。

vue.js

来源：https://stackoverflow.com/questions/77149618/how-to-update-object-properties-within-a-reactive-array-in-vue-3-composition-api

2条答案

按热度按时间

aurhwmvo1#

假设您只想在一个非常大的数组中编辑name。我不知道你的数组有多大，但我会尝试像这样将索引传递给updateName函数：

<template>
  <div>
    <div v-for="(item, itemIndex) in arr" :key="item.id">
      {{ item.name }}
      <button @click="updateName(itemIndex)">Update Name</button>
    </div>
  </div>
</template>

<script setup>
import { ref, set } from 'vue';

let arr = ref([
  { id: 1, name: 'Object 1' },
  { id: 2, name: 'Object 2' },
]);

const updateName = (itemIndex) => {
  arr.value[itemIndex].name = "Object 3"

};
</script>

另一种方法是找到索引并使用找到的索引更新它，如下所示：

<template>
  <div>
    <div v-for="item in arr" :key="item.id">
      {{ item.name }}
      <button @click="updateName(item)">Update Name</button>
    </div>
  </div>
</template>

<script setup>
import { ref, set } from 'vue';

let arr = ref([
  { id: 1, name: 'Object 1' },
  { id: 2, name: 'Object 2' },
]);

const updateName = (item) => {
  const idx = arr.value.findIndex(val => val.id === item.id)

  // update it using the index
  arr.value[idx].name = "Object 3"
};
</script>

我也看到你喜欢重新分配数组 * react-way*。我不知道为什么，但你只需要更新数组值，vue就会触发re-render。你不必像那样使用spread操作符重新分配它

赞(0）回复(0）举报 2023-10-23

kuarbcqp2#

来自文档：
Vue能够检测何时调用React式数组的突变方法并触发必要的更新。这些突变方法是：

push() 
pop()
shift() 
unshift() 
splice()
sort() 
reverse()

由于对象是列表的一部分，因此可以重新添加它。我相信它会工作
如果这个解决方案不能满足你的系统性能，我建议你把列表改成一个键字典对象。使用id进行搜索不仅会更高效，而且还可以通过更改属性来更新此ui

赞(0）回复(0）举报 2023-10-23

我来回答

如何在Vue 3 Composition API中更新React数组中的对象属性

2条答案

相关问题

热门标签

最新问答