用于选择的 Vue.js 选项组件
Posted
技术标签:
【中文标题】用于选择的 Vue.js 选项组件【英文标题】:Vue.js option component for select 【发布时间】:2017-03-25 16:09:58 【问题描述】:我正在尝试创建这个组件:
<template>
<option v-for="(text, value) in options" :value="value">
text
</option>
</template>
但我收到此错误消息:
模板语法错误不能在有状态组件根元素上使用 v-for,因为它会渲染多个元素
我怎样才能创建这种组件? 我正在使用 vue 2.0.5
以下是一些相关文档:https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
【问题讨论】:
您的选项变量看起来如何,您可以在问题中添加这个以及您使用的是哪个版本的 Vue? 我创建了一个jsfiddle,这似乎工作正常,这里有什么问题? 现在尝试将选项转换为组件 组件应该有一个根元素,v-for
显然会呈现多个元素。将其包装在父元素中。
当然,但是选项标签不能被包装,有什么解决方法吗?渲染后可能有某种解包方式。
【参考方案1】:
您不能在组件内执行此操作,您需要一个***元素,因此您需要将其包装在一个选择中并将整个选择框作为您的组件。然后,您需要将任何选项作为道具传递,所以:
模板:
<template id="my-select">
<select>
<option v-for="(text, value) in options" :value="value">
text
</option>
</select>
</template>
组件:
Vue.component('my-select',
props: ['options'],
template: "#my-select"
);
查看模型:
new Vue(
el: "#app",
data:
options:
"1": "foo",
"2": "bar",
"3": "baz"
);
现在在您的根页面中,只需将选项作为道具传递:
<my-select :options="options"></my-select>
这是 JSFiddle:https://jsfiddle.net/zL6woLa2/
【讨论】:
既然这是唯一的方法,那么这是让 v-model 再次工作的正确方法吗? jsfiddle.net/neves/zL6woLa2/1 为什么插槽在 select 中不起作用? 我觉得这看起来不错。就个人而言,我尝试将与组件相关联的所有内容保留在组件中,因此我可能会将v-model
保留在组件中,并将 $emit 保留为事件中的 bus
。我不确定为什么 slot
在这里不起作用,但是将默认选项作为道具传递并在传递值时显示它可能更容易。这是您的小提琴的更新版本,但正如我所说,这就是我的做法,所以如果您愿意,请坚持使用您的解决方案:jsfiddle.net/08qr3rL9以上是关于用于选择的 Vue.js 选项组件的主要内容,如果未能解决你的问题,请参考以下文章