vue.js - v-for 的属性如何利用 component 或者 watch 呢？饿了么的 select 万一默认值和待选值之一是一样的呢？

问题描述

问 题

这是我的页面用到了 elementUI 的 el-select 组件，el-select 组件本身也是包含在一个 v-for 里面的。

这是 HTML：

...
<template v-for="(i,index) in item.testcases">
...
<el-select v-model="i.dialine_imsi" @change="dialineChange(i.dialine_imsi,i)">
    <el-option v-for="p1 in phones" :value="p1.imsi">
    </el-option>
</el-select>
...
</template>
...

因为我本身页面加载后 select 是存在默认值的：v-model="i.dialine_imsi"，然后下拉框候选值有若干个，这个若干个中有可能有一个就和默认的值一样的，而 el-select 组件的 change 事件，是值发生变化时才会触发。就像我图中的情况一样，默认值是...70194的情况下，下拉栏中点击...70194的选项就不会触发 change 事件，可是我的需求要求我每次选择下拉栏中的数据后都需要对其他有关的数据进行一些处理，哪怕看上去下拉栏的所选数据根本没有改变。

由此我想到了 watch 监测i.dialine_imsi或者 computed 用到i.dialine_imsi，可是对于迭代中的属性值，watch 或者 computed 中使用它都没反应。。。

请问应该以什么思路来解决？小弟这里先谢过。

解决方案

p.msi等于默认值的时候，v-show或者v-if不渲染行不行。处理的话对默认值相关的提前处理好。

这篇关于vue.js - v-for 的属性如何利用 component 或者 watch 呢？饿了么的 select 万一默认值和待选值之一是一样的呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！