vue.jsでv-forとv-modelの組み合わせについて

Question

head情報とdetail情報を作成してそれをサーバーサイドにpostする画面を作成したいのですが
詳細項目を回数の単位でまとめて送信することはできるのでしょうか？
またこの場合v-modelはどのような変数を利用すれば実現可能なのでしょうか？
下記のようなデータイメージです
{master_data:"live_1",
detail:[
{syurui:1,kingaku:1000,name:"yamada"},
{syurui:3,kingaku:2500,name:"sato"}
]
}

<div id="app">
  <input type="text" id="master_data"/>
  <li v-for="n in 3">
<!-- この単位で詳細の配列としたいstart -->
    <select :name="'syurui'+n" v-model="syurui[n]"/>
      <option .... >
    </select>
    <select :name="'kingaku'+n" v-model="kingaku[n]"/>
      <option .... >
    </select>
    <select :name="'name'+n" v-model="name[n]"/>
      <option .... >
    </select>
<!-- この単位で詳細の配列としたいend -->
  </li>
  <button @click="post">POST</button>
</div>

new Vue({
  el: '#app',
  data: {
    syurui[],kingaku[],name[]
    }
  },
  methods: {
    post: function() {
      console.log(this.syurui, this.kingaku,this.name)
    }
  }
})

Answer 1

まず文法がいろいろと間違ってますね...。

• <select>の開始タグに最後/が入っている

• data: {syurui[],kingaku[],name[]}},

配列の要素が3つか2つかはっきりしないですが、まず初期値をこのように設定すればいいのではないでしょうか。

  data: {
    master_data: "",
    detail: [{},{},{}]
  },

テンプレートの方はこうすればいいでしょう。

  <li v-for="(item, n) in detail">
    <select :name="'syurui'+n" v-model="item.syurui">
      ...
    </select>
    ...
  </li>

name属性はいらない気もしますが。

Demo