更新

Question

我尝试使用显示所有国家/地区的v-select。所以我做了：

<v-select on-change="updateCountryId" label="country_name" :options="countries" ></v-select>

它工作得很好并显示我的国家但功能updateCountryId似乎不起作用

methods: {
    updateCountryId: function() {
        alert('ok');
    }
}

但我从来没有看到好的

导入vue-select我做了：

<script src="/js/vue-select/vue-select.js"> </script>

我在twig文件中使用它，所以在我的vue-select.js中，我重写了我在https://unpkg.com/vue-select@1.3.3上找到的内容，但将{{}}替换为＆lt; %%＆gt;

ps：我已经尝试过v-on：change，@ change和onChange

我的代码看起来像那样（我跳过判断无用的东西）

<div id="General">
<div class="form-group">
  <label>Pays :</label>
    <v-select  onChange="updateCountryId" label="country_name" :options="countries" ></v-select>
</div>
.
.
.
<script src="/js/vue-select/vue-select.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"></script>
<script>
  Vue.config.delimiters = ['<%', '%>'];
  Vue.component('v-select', VueSelect.VueSelect);
  var vm = new Vue({
    el: "#General",
    data: {
        countries: [],
    }, 
    filters: {
    },
    methods: {
        updateCountryId: function () {
            console.log('ok');
            alert('ok');
         },`

Answer 1

你错过了冒号：

＆＃13;

Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',

data: {
  options: ['one', 'two', 'three'],
  selected: ''
},

methods: {
    updateCountryId: function() {
        alert('ok');
    }
}
});

＆＃13;

<script src="https://unpkg.com/vue@latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select@latest"></script>

<div id="app"> 
<v-select :on-change="updateCountryId" label="country_name" :options="options" :searchable="false" ></v-select>
</div>

＆＃13;

更新

您需要使用unpkg.com/vue-select@2.0.0，因为版本1与当前版本的Vuejs

不是兼容

Answer 2

你可以这样做

  <v-select :options="etat_nip" v-model="etat_nip_selected"></v-select>

并添加v-model＆＃34; etat_nip_selected＆＃34;在这样的观看

watch:{
      'etat_nip_selected'  : function (val, oldval) {
          console.log(val);
      }
    },

了解更多信息https://vuejs.org/v2/guide/computed.html#Watchers

Answer 3

Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',

data: {
  options: ['one', 'two', 'three'],
  selected: ''
},

methods: {
    updateCountryId: function() {
        alert('ok');
    }
}
});

<script src="https://unpkg.com/vue@latest"></script>
<!-- use the latest release -->
<script src="https://unpkg.com/vue-select@latest"></script>

<div id="app"> 
<v-select :on-change="updateCountryId" label="country_name" :options="options" :searchable="false" ></v-select>
</div>

Answer 4

好吧，这确实让我有些头疼，似乎它在版本3上再次发生了变化。根据文档（https://vue-select.org/guide/upgrading.html#index-prop-replaced-with-reduce），他们删除了这3个函数：onChange，onInput，onSearch，赞成使用事件：@input

export default {
    name: 'app',
    methods: {
        changedValue: function() {
            alert("A new value was selected");
        }
    }
}

<v-select 
    options: ['one', 'two', 'three']
    selected: ''
    @input="changedValue" >
</v-select>

Answer 5

当我使用 @input 而不是 @change

on-change不适用于v-select

5 个答案:

更新