Définir la valeur par défaut dans le menu de sélection d'option

Question

Je veux lier un attribut personnalisé à un menu de sélection d'option. La balise <option> Aurait simplement un attribut de 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: ""
}

Cela ne fonctionne pas, mais si je remplace v-bind:selected Par v-bind:class, Il reçoit alors la classe appropriée. La logique fonctionne donc, mais pas avec l'attribut selected.

Un moyen de le faire fonctionner avec de tels attributs personnalisés?

Answer 1

Vous pouvez simplement utiliser v-model pour sélectionner une valeur par défaut dans une zone de sélection:

Balisage:

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

Voir le modèle:

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

Voici le JSFiddle: https://jsfiddle.net/Lxfxyqmf/