javascript - 使用 Vue.js 和 Minimalect 在 HTML 选择中显示默认值

Question

我使用带有 Mininmalect HTML 选择插件的 Vue.js 按名称和值(值是 2 位国家代码)显示国家列表。

我在使用插件选择国家时可以正常工作。它将值添加到 selected状态。

我无法解决的是，当已经有一个值/国家/地区处于状态时(即在页面加载时从数据库中获取)，如何显示该值/国家/地区。

这是我的:

<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 的值设置为数据库值，选择将自动设置为那个值。

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();
        }
    });
}