v-for 在嵌套中,如何来区分不同分组的radio,谢谢!

Question

具体实现的功能如图:

数据结构如下:

'cates':[
  {
    id: '1',
    name: '口味',
    spec: [
      id: '1',
      name '慕斯'
    ],
    [...],
    [...]
  },
  {
    id: '2',
    name: '尺寸',
    specs: [
      id: '1',
      name '6寸'
    ],
    [...],
    [...]
  }
]


----------
<div v-for="cate in cates">
  <div>
  <h4>{{cate.name}}</h4>
  <ul>
  <li v-for="spec in cate.specs">
  <label for="check_{{$parent.$index}}{{$index}}" class="text_checkbox">
  <input type="radio" name="check_select_{{$parent.$index}}"
  id="check_{{$parent.$index}}{{$index}}" value="{{$parent.$index}}.{{$index}}" v-model="" @click="choose(cate,spec)">
 <span>{{ spec.sname }}</span>
 </label>
 </li>
 </ul>
 </div>
 </div>

通过事件现在已经获取到当前所选取的值
不知道如何通过model来进行获取,
现在想处理的问题是,如何定义model来给radio设置默认值,
才开始vuejs,希望老司机指点思路,谢谢!

Answer 1

也是新手，哈哈。不是太理解你的意思，是这样吗(比如id是1的默认选中)

checked="{{spec.id === 1}}"

Answer 2

你应该是想取spec里面的数据吧？radio可以绑定值的
http://cn.vuejs.org/guide/for...

'cates':[
  {
    id: '1',
    checkedSpec: {},
    name: '口味',
    spec: {[
      id: '1',
      name '慕斯'
    ],
    [...],
    [...]}
  },
  {
    id: '2',
    name: '尺寸',
    checkedSpec:{}
    specs: {[
      id: '1',
      name '6寸'
    ],
    [...],
    [...]}
  }
]


----------
<div v-for="cate in cates">
  <div>
  <h4>{{cate.name}}</h4>
  <ul>
  <li v-for="spec in cate.specs">
  <label for="check_{{$parent.$index}}{{$index}}" class="text_checkbox">
  <input type="radio" name="check_select_{{$parent.$index}}"
  id="check_{{$parent.$index}}{{$index}}" :value="spec" v-model="cate.checkedSpec">
 <span>{{ spec.sname }}</span>
 </label>
 </li>
 </ul>
 </div>
 </div>

Answer 3

写了个简单例子，其实vue文档都有

Answer 4

radio标签是通过name属性来分组的，可以动态绑定name属性，v-bind:name="item.name"