How do I access data inside a reactive object with an array in Vue3?

Question

I am having a hard time to access the values inside the test property. When I do current.room.test I get the "Proxy { : {…}, : {…} }" as a value, but I want to read the array like shown in isButtonDisabled().

Not sure exactly what the trick is to do this inside the setup/isButtonDisabled function.

I can do current.room.title and no problems but the moment I have an Object I don't know how to get it's value

Thank you

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,
    };
  },
});

user_11869100 · Answer

The key here was to return your method into the template (if you want to call it from there). Your syntax to access the items was right.

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");

How do I access data inside a reactive object with an array in Vue3?

1 Answers