Vue.js select 的选项组件

Question

我正在尝试创建这个组件：

<template>
  <option v-for="(text, value) in options" :value="value">
    {{ text }}
  </option>
</template>

但我收到此错误消息：

template syntax error Cannot use v-for on stateful component root element because it renders multiple elements

我怎样才能创建这种组件？我正在使用 vue 2.0.5

以下是一些相关文档：https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

Answer 1

您不能在组件内部执行此操作，您需要一个顶级元素，因此您需要将其包装在 select 中并将整个 select 框作为您的零件。然后你需要将任何选项作为道具传递，所以：

模板：

<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/

Vue.js select 的选项组件

Vue.js option component for select

javascript

vue.js

vue-component