Vuejs select form input default selection

Question

The default option ('Choose Default Meta Data') is not rendering but selected as view, anyone can help?

<div class="input-field col s12">
  <select id="custom-select-f" v-model="meta_id" class="browser-default">
    <option value="" disabled :selected="meta_id ? false : true">Choose Default Meta Data</option>
    <option value="">Set As None</option>
    <option v-for="meta in metas" :value="meta.id">{{meta.data}}</option>
  </select>
  <label for="custom-select-f" class="active">Meta Data</label>
</div>

You can't have a disabled option selected.

David Hallberg Jönsson
– David Hallberg Jönsson

2017-06-26 07:00:24 +00:00
Commented Jun 26, 2017 at 7:00 — David Hallberg Jönsson
– David Hallberg Jönsson, Commented Jun 26, 2017 at 7:00

Crackers · Accepted Answer · 2017-06-26 09:21:14Z

1

Instead of binding to the selected attribute, I gave the option a 'fake' value: https://jsfiddle.net/DarkFruits/5mk2hrfn/

<select name="" id="select" v-model='name'>
  <option value="none" disabled >None</option>
  <option value="max" >Max</option>
  <option value="alex" >alex</option>
  <option v-for='n in names' :value="n">{{n}}</option>
</select>

new Vue({
    el: '#select',
    data() {
    return {
      names: ['Sandy', 'Pete'],
        name: 'none',
    }
  }
})

answered Jun 26, 2017 at 9:21

Crackers

1,1257 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

Vuejs select form input default selection

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related