Vue.js option component for select

Question

I'm trying to create this component:

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

But I get this error message:

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

How could I create this kind of component? I'm using vue 2.0.5

Here are some relevant docs: https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

Answer 1

You can't do that inside a component, you need one top level element so you're going to need to wrap that in a select and have the entire select box as your component. You will then need to pass any options as props, so:

Template:

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

Component:

Vue.component('my-select', {
  props: ['options'],
  template: "#my-select"
});

View Model:

new Vue({
  el: "#app",
  data: {
    options: {
      "1": "foo",
      "2": "bar",
      "3": "baz"
    }
  }
});

Now in your root page, just pass the options as a prop:

<my-select :options="options"></my-select>

Here's the JSFiddle: https://jsfiddle.net/zL6woLa2/