vue.js - iview关于i-select的change事件的问题
问题描述
http://jsfiddle.net/gx1jyq9k/6/
<div id="app">
<div class="tab">
<a href="javascript:void(0);" @click="tab=0">TAB1</a>
<a href="javascript:void(0);" @click="tab=1">TAB2</a>
</div>
<div class="tab-panels">
<template v-if="tab==0">
<i-select v-model="sharp">
<i-option :value="0">Circle</i-option>
<i-option :value="1">Square</i-option>
</i-select>
</template>
<template v-if="tab==1">
<i-select v-model="color" @on-change="changeColor">
<i-option value="red">Red</i-option>
<i-option value="blue">Blue</i-option>
</i-select>
</template>
</div>
</div>
var app = new Vue({
el:"#app",
data:{
tab:0,
sharp:0,
color:''
},
methods:{
changeColor:function(){
alert('Color is changed!');
}
}
})
当我点击选项卡'TAB2'时,为什么会触发'changeColor'事件,我认为是组件重用引起的问题,但是我该如何解决,谁能帮我怎么做,非常感谢!
解决方案
正如您的猜测,问题在于组件的重用。
您可以添加key
以i-select
防止此问题
<div id="app">
<div class="tab">
<a href="javascript:void(0);" @click="tab=0">TAB1</a>
<a href="javascript:void(0);" @click="tab=1">TAB2</a>
</div>
<div class="tab-panels">
<template v-if="tab==0">
<i-select v-model="sharp" key="tab1">
<i-option :value="0">Circle</i-option>
<i-option :value="1">Square</i-option>
</i-select>
</template>
<template v-if="tab==1">
<i-select v-model="color" @on-change="changeColor" key="tab2">
<i-option value="red">Red</i-option>
<i-option value="blue">Blue</i-option>
</i-select>
</template>
</div>
</div>
推荐阅读
- maven - 通过命令提示符运行 TestNG.xml
- mysql - 插入、更新或删除 MongoDB 或 SQL 哪个更快?
- html - 透明覆盖 div 层脱离父容器?
- arrays - 使用 CFArrayCreate 创建 CFArrayRef 时元素的混乱
- javascript - 无法使用下一个 js 导出路径图?
- mysql - 使用 SQL SELECT 从现有列数据创建新列
- git - 如果参数包含波浪号,System.Diagnostics.ProcessStartInfo 将挂起
- java - Java中的CSVWriter编码
- office365 - Microsoft graph people\me 返回空的用户列表
- angular - 使用 @OutPut 在子父 .ts 组件之间共享对象