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

当我单击“ 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”之前添加“：”

有关i-select更改事件的iview问题

2 个答案: