VueJS method json response to selectbox?

Question

I have a VueJS component, now I'm getting from JSON response which I want to export into a html select box.

My VueJS method:

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

I found example in VueJS documentation but there is still the problem with method...

How can I export this response into a selectbox, I know how to work with v-for, but I don't know exactly how to initialize this data in HTML (with v-bind, or something like that)?

What are you getting exactly from /api/v1/tasklist?

Francesco Casula
– Francesco Casula

2017-12-08 10:04:50 +00:00
Commented Dec 8, 2017 at 10:04 — Francesco Casula
– Francesco Casula, Commented Dec 8, 2017 at 10:04

Thomas Ferro · Accepted Answer · 2017-12-08 10:06:47Z

1

I don't know what's in the taskList items but you can simply bind those data in option tags :

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

answered Dec 8, 2017 at 10:06

Thomas Ferro

2,45221 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

samius polis Over a year ago

I know this, but where I have to define v-model="selectedTask" in JS code?

samius polis Over a year ago

Solved, I called this function in mounted area and not works everything (this. getTaskList())

Thomas Ferro Over a year ago

You could even call this method in the created hook, so your data will be ready as soon as possible (you don't need to wait for the element to be mounted to load those data). Sorry I didn't understand your question in the first place.

Collectives™ on Stack Overflow

VueJS method json response to selectbox?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related