Проблема iview о событии изменения i-select - PullRequest
Новая
       54

Проблема iview о событии изменения i-select

0 голосов
/ 16 октября 2018

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», я думаю, что проблема вызвана повторным использованием компонента, но как я могу это исправить, кто можетпомогите мне как сделать, большое спасибо!

Ответы [ 2 ]

0 голосов
/ 16 октября 2018 
 <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!');
         }
       }
    })

Попробуйте добавить значение по умолчанию для цвета!

И, пожалуйста, добавьте ":" перед значением = "красным" и значением = "синим"

0 голосов
/ 16 октября 2018

Как вы думаете, проблема заключается в повторном использовании компонента.

Вы можете добавить 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>

Демо здесь

...