Как получить данные из динамических созданных чекбоксов vue js?

Question

Есть компонент-карточка с чекбоксами, карточки создаются по данным с апишки и их несколько (создается v-for), а внутри каждой создается много чекбоксов по данным опять же с апишки. Как правильно собрать из всех карточек значения, чтоы отправить на сервер?

<v-list-item v-for = "dashboard in dashboards" v-bind:key = "dashboard.id">
          <v-list-item-content>
             <v-checkbox
              class="pl-4"
              :label=dashboard.title
            ></v-checkbox>
          </v-list-item-content>
</v-list-item>

Запрос к апишке тоже самый обычный:

getDashes: function() {
        axios.post('http://127.0.0.1:5000/api/dashboards', this.folder.id)
          .then((responce) => {
            this.dashboards = responce.data})

Answer 1

Например как-то так...

https://codepen.io/latdev/pen/ZEXzNQq

<div id="app">
  <div>
    <label v-for="(text, id) in checkboxes" v-key="id">
      <span v-text="text"></span>
      <input v-bind:name="id" type="checkbox" v-model="values[id]">
    </label>
    <pre v-text="values"></pre>
  </div>
</div>

const checkboxes = {
  "one": "Один",
  "two": "Два",
  "three": "Три",
}

new Vue({
  data: {
    checkboxes,
    values: {},
  },
  el: "#app"
})

БЛОГ НА HUSL

Как получить данные из динамических созданных чекбоксов vue js?

Ответы (1 шт):