web-dev-qa-db-fra.com

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

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?

29
marchello

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/

52
craig_h