Как записать многомерные массивы из форм с помощью Vue?

Question

Итак, у меня есть этот образец:

<div class="form-item">
  <label for="list-0"><?php _e('List 0', 'test'); ?></label>
  <input name="list[0]" type="text" id="list-0" value="">
</div>
<div class="form-item">
  <input type="checkbox" name="list[0][is-current]" id="list-0-current" value="yes">
  <label for="list-0-current"></label>
</div>

Я бы хотел получить что-то вроде этого:

list:[
    [value, is_current] // say 'John', yes
    ,[value, is_current] // say 'Francis', false
    ,[value, is_current] // say 'Bob', yes
]

В Vue вы можете использовать массивы в данных:

var vueapp = new Vue({
  el: '#form'
  ,data:{
    form:{
      list:[]
      //[...] etc..

Тогда в своих полях вы просто используете v-model="form.list" в каждом поле списка. Но это только запись плоского массива, в то время как мне нужен способ иметь множественный массив. Является ли это возможным? Как?

Answer 1

Сделать объект:

 data: {
      form: [{}]
 },

Если это ваш массив:

list = [
    [value, is_current],
    [value, is_current],
    [value, is_current],
];

Затем просмотрите этот массив и добавьте каждый внутренний массив к объекту:

  list.forEach(function(element) {
        that.form.push({value: element[0], key: element[1]});
  });

См. Эту скрипку для справки:

https://jsfiddle.net/mnd8ojLh/1/