使用 Vue.js 和 Minimalect 在 HTML select 中显示默认值

Question

我正在使用 Vue.js 和 Mininmalect HTML select 插件来按名称和值显示国家列表（值是 2 位国家代码）。

我在 select 一个国家/地区使用该插件时可以正常工作。它将值添加到 selected 状态。

我无法解决的是如何显示一个 value/country 当已经有一个处于状态时（即在页面加载时来自数据库）。

这是我的：

<template>
    <select name="country" v-model="country">
        <option v-for="country in countries" value="{{ country.value }}">{{ country.label }}</option>
    </select>
</template>

<script>
    export default {
        data() {
            return {
                selected: 'GB',
                countries: require('../utilities/countries.js'),
            }
        },
        ready() {
            var vm = this;
            $('select').minimalect({
                onchange: function(value) {
                    vm.selected = value;
                }
            });
        }
    };
</script>

我正在努力让 select 属性出现，即 <option value="GB" selected>United Kingdom</option> 所以在加载页面时有一个默认值。

Answer 1

你有 v-model="country"，所以如果你只是将 country 的值设置为数据库值，select 将自动设置为该值。

data() {
    return {
        country: 'GB',
        countries: require('../utilities/countries.js'),
    }
},
ready() {
    var vm = this;
    $('select').minimalect({
        onchange: function(value) {
            vm.country = value;
        },
        afterinit: function() {
            $('select').val(vm.country).change();
        }
    });
}

Answer 2

将您的 v-model 更改为 selected。而且我认为您的问题是性能问题。为您的函数添加一个 setTimeout。

<template>
    <select name="country" v-model="selected">
        <option v-for="country in countries" value="{{ country.value }}">{{ country.label }}</option>
    </select>
</template>

<script>
    export default {
        data() {
            return {
                selected: 'GB',
                countries: require('../utilities/countries.js'),
            }
        },
        ready() {
            var vm = this;
            setTimeout(function(){
              $('select').minimalect({
                  onchange: function(value) {
                      vm.selected = value;
                  }
              });
            });
        }
    };
</script>

使用 Vue.js 和 Minimalect 在 HTML select 中显示默认值

Display a default value in HTML select using Vue.js and Minimalect

javascript

jquery

html

html-select

vue.js