I-select更改事件的iview问题

Question

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!');
         }
       }
    })

当我点击标签‘tab 2’，为什么触发事件'changeColor'，我认为组件重用所造成的问题，但我如何解决它，谁能帮助我如何做，非常感谢！

Answer 1

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

可以将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>

这里的演示

Answer 2

 <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!');
         }
       }
    })

尝试添加默认值的颜色！

请在value=“红色”和value=“蓝色”之前加上":“