iview 关于 i-select 的变化事件的问题

Question

<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'，我认为是组件重用导致的问题，但我该如何解决，谁能帮助我怎么做，非常感谢！

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>

Demo here

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="red"和value="blue"

前加上“:”

iview 关于 i-select 的变化事件的问题

iview problem about i-select's change event

vue.js

vuejs2

iview