向vue-select添加新标记
向vue-select添加新标记
提问于 2017-12-13 08:25:38
在vue-select vuejs组件中，如果您在它们的演示页面上看到，您可以从下拉列表中选择多个项。但是，如果您键入了下拉列表中不可用的内容，则只需键入新文本并按enter键，它就会成为一个标记。您可以在他们的演示页面上看到这种行为：
https://sagalbot.github.io/vue-select/
不过，我是做不到的。我可以从下拉列表中进行选择，但是如果我键入了一些新的内容，那就不会成为一个标签。我有个jsbin显示我做了什么。任何帮助都是非常感谢的。
http://jsbin.com/xoxohenoli/edit?html,js,output
我的抄本：
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>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-13 09:05:40
您需要向组件中添加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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47788503
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号