Vuejs как получить доступ к вложенному объекту по ключам, соединенным с точкой в ​​переменной?

Question

Предположим, у меня есть следующие данные:

var a = [{id: 1, name: {en: "English"},  desc: {en: "desc"}}];

Выше массива есть больше элементов, предположим, у меня есть другой компонент для создания списков флажков из массива, теперь я хочу передать этот массив этому компоненту с некоторыми другие реквизиты, такие как id ключ для использования для идентификатора элементов моего чекбокса и label для использования в качестве меток флажка. Ключ, который я хочу использовать в качестве метки для флажка, - name.en. Мои данные имеют следующий формат:

[{
    "name": {
        "en": "Limited Liability Company",
        "dr": "",
        "pa": ""
    },
    "description": {
        "en": "This type of business combines the pass-through taxation benefits of a partnership with the limited-liability benefits of a corporation.",
        "dr": "",
        "pa": ""
    },
    "id": 1,

},
{
    "name": {
        "en": "Corporation",
        "dr": "",
        "pa": ""
    },
    "description": {
        "en": "A corporation is a business in which a group of people acts together as a single entity; most commonly, owners of a corporation are shareholders who exchange consideration for the corporation's common stock. Incorporating a business releases owners of financial liability of business obligations; however, a corporation has unfavorable taxation rules for the owners of the business.",
        "dr": "",
        "pa": ""
    },
    "id": 2
}]

Мой компонент флажок требует 3 реквизита id, label, data, мой компонент html:

<div class="mb-3" v-for="(item, index) in listData" :key="index">
   <div class="checkbox-wrapper d-flex">
     <input type="checkbox" :id="item[id]" :value="item[id]" :checked="item.isChecked" @change="setValue($event, item)">
     <label :for="item[id]" class="checkbox-label-over-flow"><span>{{item[label]}}</span></label>
   </div>
 </div>

Теперь, как я могу получить доступ к метке каждый элемент с label переменной? если label = 'name.en'

Answer 1

Я не уверен, как или когда вы получаете доступ к значению флажка, но это то, что вас волнует. Измените значение на ваш ярлык.

<div class="mb-3" v-for="(item, index) in listData" :key="index">
   <div class="checkbox-wrapper d-flex">
     <input type="checkbox" :id="item.id" :value="item.label" :checked="item.isChecked" @change="setValue($event, item)">
     <label :for="item[id]" class="checkbox-label-over-flow"><span>{{ item.label }}</span></label>
   </div>
 </div>

Также, @change, вы звоните setValue() и передаете item. Вы также можете получить доступ к item.label из функции setValue()