[英]Vue.js option component for select
我正在尝试创建这个组件:
<template>
<option v-for="(text, value) in options" :value="value">
{{ text }}
</option>
</template>
但我收到此错误消息:
模板语法错误不能在有状态组件根元素上使用 v-for,因为它呈现多个元素
我怎样才能创建这种组件? 我正在使用 vue 2.0.5
以下是一些相关文档: https ://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
您不能在组件内部执行此操作,您需要一个顶级元素,因此您需要将其包装在一个选择中并将整个选择框作为您的组件。 然后,您需要将任何选项作为道具传递,因此:
模板:
<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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.