Блог

Главная - Вопросы по программированию - Как получить доступ к данным внутри реактивного объекта с массивом в Vue3?

Как получить доступ к данным внутри реактивного объекта с массивом в Vue3?

#vuejs3 #vue-reactivity

Вопрос:

Мне трудно получить доступ к значениям внутри тестового свойства. Когда я выполняю текущий тест. room., я получаю «Прокси { : {…}, : {…} }» как значение, но я хочу прочитать массив, как показано в 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>
Метки: