Set default value to option select menu

Question

I want to bind a custom attribute to an option select menu. The <option> tag would simply have an attribute of selected="selected"

<template>   <div>     <select>       <option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option>     </select>   </div> </template>  data: {   selected: "selected",   notSelected: "" } 

This does not work, but if I change v-bind:selected to v-bind:class then it receives the appropriate class, so the logic is working, but not with the selected attribute.

Any way to make it work with such custom attributes?

Answer 1

You can just use v-model for selecting a default value on a select box:

Markup:

<div id="app">   <select v-model="selected">      <option value="foo">foo</option>      <option value="bar">Bar</option>      <option value="baz">Baz</option>   </select> </div> 

View Model:

new Vue({   el: "#app",   data: {     selected: 'bar'   } }); 

Here's the JSFiddle: https://jsfiddle.net/Lxfxyqmf/