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!');
}
}
})
When I click the tab 'TAB2', why trigger the event 'changeColor',I think the problem caused by component reuse,but how can I fix it,who can help me how to do,thanks very much!
As your guess, the problem is component re-use.
You can add key
to i-select
to prevent this problem
<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>