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

eni9jsuy 于 2023-03-31 发布在 Vue.js

关注(0)|答案(6)|浏览(179)

我试着使用一个显示所有国家的v-select。所以我这样做了：

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

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

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

但我从来没有看到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');
         },`

vue.js

来源：https://stackoverflow.com/questions/43516395/on-change-doesnt-work-on-v-select

6条答案

按热度按时间

czfnxgou1#

您缺少冒号：

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不兼容

赞(0）回复(0）举报 2023-03-31

aiazj4mn2#

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

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

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

赞(0）回复(0）举报 2023-03-31

bkkx9g8r3#

你能做到的

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

并在手表中添加v型“etat_nip_selected“，如下所示

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

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

赞(0）回复(0）举报 2023-03-31

zdwk9cvp4#

当我使用@input而不是@change时，它工作正常

赞(0）回复(0）举报 2023-03-31

ghg1uchk5#

对于vuetify 3，我发现我必须添加return-object，才能使用对象数组：

<v-select v-model="selectedValue"
          :items="itemOptions"
          item-title="title"
          item-value="value"
          @update:modelValue="triggerFoo"
          return-object
/>

对于选项为：

const options = [{
  title: 'option 1',
  value: 'value 1,
}, {
  title: 'option 2',
  value: 'value 2'
}]

赞(0）回复(0）举报 2023-03-31

dluptydi6#

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>

赞(0）回复(0）举报 2023-03-31

我来回答

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

6条答案

更新

相关问题

热门标签

最新问答