iview关于i-select的change事件的问题答案

【问题标题】：iview problem about i-select's change eventiview关于i-select的change事件的问题
【发布时间】：2018-10-16 01:30:09
【问题描述】：

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

【问题讨论】：

标签： vue.js vuejs2 iview

【解决方案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

【讨论】：

哈哈，我想出了关键解决方案，但是我在'i-option'中添加了key，所以我没有修复它。确切的方法是在i-select中添加key，谢谢非常，大神！！

【解决方案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" 前加上“:”

【讨论】：