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

Posted 2023-03-16

【中文标题】如何在 Vue3 中使用数组访问反应对象内的数据？

【英文标题】：How do I access data inside a reactive object with an array in 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,
    ;
  ,
);

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