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'事件,我认为是组件重用引起的问题,但是我该如何解决,谁能帮我怎么做,非常感谢!