前端 - vue的节点数组遍历取数组的某项对象里的值赋值没有响应式？

Question

以下是我的一个demo，想问问还有没有大神有其他实现方案

<uni-forms-item v-if="showStove" :labelWidth="80" label="灶具品牌" required id="zjpp"> item.valueData.pinpai1: {{item.valueData.pinpai1}}<comp-picker-custom :value.sync="item.valueData.pinpai1" :key="index + 0.1" :valueList="$dict.zjpinpai1List" :readonly="readonly"></comp-picker-custom></uni-forms-item>

我这个对象是一个数组遍历的item的对象
这个对象里的pinpai1没有响应式，该怎么做？

Answer 1

在 Vue.js 中，如果你想要一个对象或数组的属性具有响应性，那么你需要确保这个对象或数组是通过 Vue 的响应式系统创建的。如果你的数组或对象是静态的（即不是通过 Vue 的 data、computed 或 methods 创建的），那么 Vue 将无法跟踪其更改，因此它也不会是响应式的。

在你的例子中，item.valueData.pinpai1 看起来是一个静态对象的属性。你需要确保 item 和 item.valueData 是通过 Vue 的响应式系统创建的。

如果你不能更改 item 和 item.valueData 的创建方式，你可能需要创建一个新的响应式属性来存储 pinpai1 的值，并在 pinpai1 更改时更新这个新属性。

例如，你可以在 Vue 组件的 data 函数中创建一个新的响应式属性，然后在 watch 函数中监听 item.valueData.pinpai1 的更改：

<template>  <uni-forms-item v-if="showStove" :labelWidth="80" label="灶具品牌" required id="zjpp">    <comp-picker-custom :value.sync="pinpai1" :key="index + 0.1" :valueList="$dict.zjpinpai1List" :readonly="readonly"></comp-picker-custom>  </uni-forms-item></template><script>export default {  data() {    return {      showStove: true,      readonly: false,      pinpai1: null, // 新的响应式属性      // 其他数据...    };  },  computed: {    // 假设你的 item 是从某个计算属性或方法中获取的    item() {      // 返回你的 item    },  },  watch: {    // 监听 item.valueData.pinpai1 的更改    'item.valueData.pinpai1'(newValue) {      this.pinpai1 = newValue; // 在 pinpai1 更改时更新新的响应式属性    },  },  // 其他选项...};</script>

在这个例子中，pinpai1 是一个新的响应式属性，它会在 item.valueData.pinpai1 更改时更新。然后你可以在你的模板中使用 pinpai1 而不是 item.valueData.pinpai1，这样它就会有响应性了。

注意，这只是一个示例，你可能需要根据你的具体情况来调整代码。例如，如果你的 item 是从 props 或其他非响应式源获取的，你可能需要在不同的地方设置和监听 pinpai1。