An option selection component for Vue.js

Question

An option selection component for Vue.js

I'm attempting to design a component like the following:

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

Unfortunately, I encountered an error message:

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

Is there a workaround for creating this type of component? I am working with vue version 2.0.5.

Check out these relevant resources: https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

javascript vue.js vue-component

Answer 1

Answer №1

To work correctly within a component, you must ensure that there is a single top-level element. In this case, you will need to wrap the select box in a parent element and use the entire select box as your component. Additionally, any options should be passed as props:

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": "apple",
      "2": "banana",
      "3": "orange"
    }
  }
});

To implement this on your main page, simply pass the options as a prop:

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

Take a look at the JSFiddle example here: https://jsfiddle.net/zL6woLa2/

Answer 2

To work correctly within a component, you must ensure that there is a single top-level element. In this case, you will need to wrap the select box in a parent element and use the entire select box as your component. Additionally, any options should be passed as props:

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": "apple",
      "2": "banana",
      "3": "orange"
    }
  }
});

To implement this on your main page, simply pass the options as a prop:

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

Take a look at the JSFiddle example here: https://jsfiddle.net/zL6woLa2/

An option selection component for Vue.js

Answer №1

Similar questions

How come the hidden container does not reappear after I click on it?

Searching for values within an array using the ".includes" method

Is there a way for me to adjust the font size across the entire page?

Using `encodeURIComponent` to encode a URL does not function properly when used with a form action

Is there a way for me to choose a single file while executing the migrate-mongo up command?

Failure to append an object to the array occurs when submitting an HTML form

ESLint's feature experimentalObjectRestSpread not being applied with expected behavior

Guide on retrieving the initial value from a map in a React application

Tips on incorporating the wait function within the evaluation_now action in Nightmare?

Retrieving a specific attribute pair from a JSON object

Hold off on moving forward until the content has been loaded using ajax within loops

A quick guide on automatically checking checkboxes when the user's input in the "wall_amount" field goes over 3

Choosing several checkboxes and populating an array with values - HTML and JavaScript

Guide for bringing in a complete npm library into React Native beyond just a single file access

Patience is key for a fully completed JSON in JavaScript

Vue.js integration causes Bootstrap modals to stop functioning properly

Clicking on an anchor tag will open a div and change the background color

Error encountered while using the Fetch API: SyntaxError - the JSON data contains an unexpected character at the beginning

Differences Between Data Captured from Form Submissions and Data Obtained Through Ajax

What could be causing my React app to consistently reload whenever I save a file in my project?