在vue-select vuejs组件中,如果您在其演示页面上看到,您可以从下拉列表中选择多个项目。但是,如果您键入下拉列表中不可用的内容,则只需键入该新文本并按Enter键即可成为标记。您可以在他们的演示页面上看到此行为:
https://sagalbot.github.io/vue-select/
但是,我无法做到这一点。我可以从下拉列表中进行选择,但如果我输入新内容,则不会成为标记。我有这个jsbin显示我做了什么。任何帮助表示赞赏。
http://jsbin.com/xoxohenoli/edit?html,js,output
我的Javascript:
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: function() {
return {
options: ["A","B"],
placeholder: 'Choose a country..',
}
},
});
我的HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://unpkg.com/vue@2.1.10"></script>
<script src="http://unpkg.com/vue-select@2.0.0"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container-fluid">
<h2>VueSelect Basic Example</h2>
<v-select :placeholder="placeholder"
multiple
:options="options"></v-select>
</div>
</body>
</html>
答案 0 :(得分:3)
您需要在组件中添加 taggable 属性,请查看工作示例。
请使用整页代码段以避免重叠控制台输出。
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-select@2.0.0/dist/vue-select.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container-fluid">
<h2>VueSelect Basic Example</h2>
<v-select taggable :placeholder="placeholder"
multiple
:options="options"></v-select>
</div>
<script>
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: function() {
return {
options: ["A","B"],
placeholder: 'Choose a country..',
}
},
});
</script>
</body>
</html>