关于vue v-for组件,组件里有v-model的问题

现在封装了一个组件,组件里有select,通过v-model绑定了值,渲染的时候默认选中第一个,但是在对组件v-for循环的时候发现v-model是一样的,那怎么进行取值呢?
我的想法是父组件将v-model作为参数传递,这样子组件得到了不一样的v-model但是这样也没办法实现默认选中第一个。大家有什么好的思路吗?

父组件

<filiter-prop v-on:delete="removeEntity(index)" v-for="(item,index) in searchPropData" :propType="entityProp"></filiter-prop>
<div class="add-prop flex">
    <span @click="addEntityProp">更多筛选属性</span>//addEntityProp动态添加一组filiter-prop组件
</div>

子组件

 <el-select v-model="propVal" placeholder="请选择" size="small" @change="changeProp">
    <el-option v-for="item in propType" :label="item.name" :value="item.uuid">
    </el-option>
</el-select>//子组件v-model绑定当前select的选中值,但是在v-for后都是v-model='propVal'不能取值

回答:

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
  el: '...',
  data: {
    selected: 'A',//默认选中 A
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

是这个意思么?

回答:

经过了解,我修改下回答:

filter-group 组件

export default {
  // ...
  data: () => {
   propVal: ''
  },
  props: ['propType']
  mounted () {
    if (this.propType.length) {
      this.propVal = this.propType[0].uuid;
    }
  },
  // ...
}

回答:

你是指在el-option的循环中得到的propVal都是一样的?如果是这个情况,那其实是正常的。
因为<el-select><el-option>的行为和HTML原生的<select><option>的行为一样,<select>是整个下拉菜单元素,而<option>是下拉菜单项元素。如下代码中

<select v-model="propVal">
    <option value="a"></option>
    <option value="b"></option>
    ...
</select>

select元素的值,是你当前选中的option选项的值,也就是你的例子中的propVal。
也就是说,如果你选中了第一项,那你的propVal就是’a’,如果选中了第二项,propVal就是’b’。

这样说,你应该就明白了,其实要让它默认选中第一个,只要将propVal设置到和第一个option(也就是你的组件里的<el-option>)的value值相等即可。插件会自动把value与<el-select>的值(也就是propVal值)的<el-option>元素选中的。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注