[英]Display a default value in HTML select using Vue.js and Minimalect
I'm using Vue.js with the Mininmalect HTML select plugin to display a list of countries by name and value (value being the 2 digit country code). 我正在使用Vue.js和Mininmalect HTML select插件按名称和值显示国家/地区列表(值为2位数国家/地区代码)。
I've got it to work when using the plugin to select a country. 在使用插件选择国家/地区时,我已经开始工作了。 It's adds the value to the selected
state. 它会将值添加到selected
状态。
What I can't work out is how display a value/country when there is already one in state (ie from the database when the page loads). 我无法解决的问题是当状态已经存在时(例如,当页面加载时从数据库中)显示值/国家/地区。
This is what I have: 这就是我所拥有的:
<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>
I'm struggling to get the select
attribute to appear, ie <option value="GB" selected>United Kingdom</option>
so there is a default when the page is loaded. 我正在努力让select
属性出现,即<option value="GB" selected>United Kingdom</option>
因此在加载页面时会有默认值。
You've got v-model="country"
, so if you just set the value of country
to the database value, the select will automatically be set to that value. 你有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();
}
});
}
Change your v-model
with selected
. 使用selected
更改您的v-model
。 And I think your problem is a performance problem. 我认为你的问题是性能问题。 Add a setTimeout
for your function. 为您的函数添加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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.