Vue.js i查看有关i-select'；s变化事件

圆圈
广场
红色
蓝色
var app=新的Vue({
el:“应用程序”，
数据：{
选项卡：0，
夏普:0,，
颜色：“”
},
方法：{
changeColor:function（）{
警报（'颜色已更改！'）；
}
}
})

---

当我点击标签“TAB2”时，为什么要触发事件“changeColor”，我认为这是组件重用造成的问题，但是我如何修复它，谁能帮我怎么做，非常感谢

正如您所猜测的，问题在于组件重用

您可以将

键

添加到

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>

圆圈
广场
红色
蓝色

红色
蓝色
var app=新的Vue({
el:“应用程序”，
数据：{
选项卡：0，
夏普:0,，
颜色：'红色'
},
方法：{
changeColor:function（）{
警报（'颜色已更改！'）；
}
}
})

尝试为颜色添加默认值

---

请添加“：“在value=“red”和value=“blue”之前，我提出了关键解决方案，但我将关键添加到了“I-option”，因此我没有修复它。确切的方法是将关键添加到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>

 <i-option :value="red">Red</i-option>
 <i-option :value="blue">Blue</i-option>

var app = new Vue({
    el:"#app",
    data:{
    tab:0,
    sharp:0,
    color:'red'
       },
    methods:{
      changeColor:function(){
        alert('Color is changed!');
         }
       }
    })