How to convert a JSON response into a select box using VueJS?

Question

How to convert a JSON response into a select box using VueJS?

I have a VueJS component where I need to populate a html select box with data from a JSON response.

This is my VueJS method:

getTaskList() {
    axios.get('/api/v1/tasklist').then(response => {
        this.taskList = this.data.taskList;
    });
}

While researching, I came across an example in the VueJS documentation but I'm still having issues with the method...

How can I transfer this response data into a selectbox? I am familiar with using v-for, but I am unsure how to initialize this data in HTML (possibly with v-bind or something similar).

javascript json vue.js vuejs2

Answer 1

Answer №1

Unsure of the contents within each item of the taskList, but you can easily connect that data in option tags:

<select v-model="selectedTask">
  <option v-for="task in taskList" :key="task.id" :value="task.value">{{ task.label }}</option>
</select>

Answer 2

Unsure of the contents within each item of the taskList, but you can easily connect that data in option tags:

<select v-model="selectedTask">
  <option v-for="task in taskList" :key="task.id" :value="task.value">{{ task.label }}</option>
</select>

How to convert a JSON response into a select box using VueJS?

Answer №1

Similar questions

Learn how to retrieve information using the dash operator in ReactJS

Abort S3 file upload using ASW-SDK

Issue with Yeoman webapp generator and Gulp, encountering error when using Gulp-jade package

When utilizing custom modules in Node.js, is it more effective to require the module from within a function or at the top of the script?

Securing specific pages in Angular front-end: A guide to implementing authentication

Obtain every possible sequence of US phone number segments for a provided number

When using Rails to render a JSON page remotely, the JavaScript AJAX handler fails to capture the response

When the C# method is executed, jQuery is reset

Experiencing a surge in requests with LazyLoad enabled?

Steps to add text to a bar chart in morris.js

Implementing an automatic link generation feature for files within a directory using JavaScript

Is there a way to retrieve a JSON result from an API call using jQuery (or plain JavaScript) without relying on Ajax?

Preventing FlatList from scrolling when re-sizing

Struggling with retrieving data from a JSON file within a Flutter Stateful Widget?

Is there a way to use Lodash to quickly return the same value if a condition is met using the ternary operator

Wavy CSS Animation

Steps for exporting various elements from a .vue file

Deliver search findings that are determined by matching criteria, rather than by identification numbers

The content will only be visible when a comment is added and then removed

Error in Vue.js: Trying to access properties of an undefined object