Используйте флажок в качестве привязки данных в VUE

Question

Я пытаюсь выяснить, как визуализировать выбранные значения в Vue.

У меня есть форма, которая выполняет запрос на основе выбора:

<form id="Register">   
    <br>Firstname<input type="checkbox" value="firstName">
    <br>Lastname<input type="checkbox" value="lastName">
    <br>Nickname<input type="checkbox" value="nickName">
    <br>Mobile<input type="checkbox" value="Mobile"">
    <br><button type="button" id="submit">Submit</button>
</form>

Затем запросы возвращают объект JSON, подобный этому:

data: {
    names: [
        { firstName: "Jessica", lastName: "Jones" },
        { firstName: "Mike", lastName: "Lebowski" }
    ]
}

Но когда я пытаюсь сделать это в Vue, используя v-for

<div class v-for="name in names">
    {{name}}
</div>

-или-

<div class v-for="name in names">
    <div class v-for="details in name"> 
        {{details}}
    </div>
</div>

Отображается либо со всем объектом

{ firstName: "Jessica", lastname: "Jones" }

или firstname в одном ряду и lastname в другом.

Есть ли способ, как вы можете отобразить все в одной строке в HTML на основе выбранного ввода?

Answer 1

Вы также можете использовать деструктуризацию:

<div class v-for="({firstName, lastName}) in names">
  {{firstName}} {{lastName}}
</div>

Или сопоставьте свойства в строке:

<div class v-for="name in names">
  {{ Object.keys(name).map(key => name[key]).join(' ') }}
</div>

Answer 2

Вы можете напрямую получить доступ к свойству объекта с помощью objectName.propertyName.

В вашем случае:

<div class v-for="name in names">
    {{name.firstName}} {{name.lastName}}
</div>