如何在 Vue3 中使用数组访问反应对象内的数据？答案

【问题标题】：How do I access data inside a reactive object with an array in Vue3?如何在 Vue3 中使用数组访问反应对象内的数据？
【发布时间】：2021-11-10 03:30:22
【问题描述】：

我很难访问测试属性中的值。当我执行 current.room.test 时，我得到“Proxy { : {…}, : {…} }”作为值，但我想读取 isButtonDisabled() 中所示的数组。

不确定在 setup/isButtonDisabled 函数中执行此操作的技巧是什么。

我可以做 current.room.title 并且没有问题，但是当我有一个对象时，我不知道如何获得它的价值

谢谢

export default defineComponent({
  name: "App",
  setup() {

    const roomId = ref(5);
    const current = reactive({
      room: {_id: 1, title: 'title', test: [{_id: 4}, {_id: 3}]},
    });

    function isButtonDisabled(optionIdx: number) {
      console.log(current.room.test);
      console.log(current.room.test[optionIdx]);
    }

    return {
      current,
    };
  },
});

【问题讨论】：

标签： vuejs3 vue-reactivity

【解决方案1】：

这里的关键是将您的方法返回到模板中（如果您想从那里调用它）。您访问这些项目的语法是正确的。

const { createApp, reactive, ref } = Vue;
const app = createApp({
  setup() {      
    const roomId = ref(5);
    const current = reactive({
      room: {_id: 1, title: 'title', test: [{_id: 4}, {_id: 3}]},
    });
    
    function isButtonDisabled(optionIdx) {
       console.log(current.room.test[optionIdx]);
       console.log(current.room.test[optionIdx]._id, ' value');
    }

    return {
      isButtonDisabled
    }
  }
});
app.mount("#app");

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <button @click="isButtonDisabled(0)">test: _id: 0</button>
  <button @click="isButtonDisabled(1)">test: _id: 1</button>
</div>

【讨论】：