vue.js - on-change 不适用于 v-select

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 上找到的内容但将 {{ }} 替换为 <% %>

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

你漏掉了冒号:

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>

更新

你需要使用unpkg.com/vue-select@2.0.0因为版本 1 与 Vuejs

的当前版本不兼容