CODEWITHSUNDEEP
javascriptjquerydrop-down-menuvue.js
AskPete
AskPete

Reputation: 88

Vue JS not rendering the value attribute of Option elements

I've got a weird thing going on using a Select element with Vue JS: The following code:

<select id="nameDd" v-model="name" >
    <option v-for="n in names" v-bind:value="n.key" " >
        {{ n.value }}
    </option>
</select>

renders the Select without the Value attribute in the Options elements:

<select id="nameDd">
    <option>Carol</option>
    <option>Carl</option>
    <option>Clara</option>
</select>

This of course means that the correct Option cannot be selected when required. In my scenario an entry in a table is clicked and the edit form is shown (using v-show) but the Select remains empty instead of selecting the right value. In the background, the v-model 'name' does have the right value.

Confusingly, as soon as I select one Option, it adds the Value attribute:

<select id="nameDd">
    <option value="1">Carol</option>
    <option value="2">Carl</option>
    <option value="3">Clara</option>
</select>

Now the (even more) confusing part. This actually shows the Value attribute in the Option elements:

<select id="nameDd" v-model="name" >
    <option v-for="n in names" v-bind:value="n.key+'X'" " >
        {{ n.value }}
    </option>
</select>

...but of course with an appended X, which again avoids the right Option being selected.

- Is this some VueJs feature that I don't get? What am I doing wrong?

Upvotes: 2

Views: 2159

Answers (1)

Mani Jagadeesan
Mani Jagadeesan

Reputation: 24265

Why is there a second double-quote (") after v-bind:value in the option tag? 

<option v-for="n in names" v-bind:value="n.key" " >

I can't find any other issue with your code. I practically wrote the same code again and it worked. Here is a working jsFiddle for reference: https://jsfiddle.net/mani04/3x0z3vzk/

As you can see, I really don't have much code, just the 3 lines:

<select v-model="selectedPerson">
    <option v-for="person in people" :value="person.key">{{person.name}}</option>
</select>

I don't know if the second double quote was causing the issue. Vue expects perfect markup so that it can do its model-view bindings properly. When I tried to put a stray double-quote like yours, I got a console error, not the missing option value that you noticed.

I hope this example helps to fix your code!

Upvotes: 3

Related Questions