Définir la valeur par défaut à l'option Sélectionner le menu

je veux lier un attribut personnalisé à une option Sélectionner menu. <option> tag 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 change v-bind:selectedv-bind:class alors il reçoit la classe appropriée, donc la logique fonctionne, mais pas avec le selected l'attribut.

de Toute façon pour le faire fonctionner avec de tels attributs personnalisés?

18
demandé sur marchello 2016-12-13 16:11:53

1 réponses

Vous pouvez simplement utiliser v-model pour sélectionner une valeur par défaut dans une liste déroulante:

Syntaxe:

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

Modèle De Vue:

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

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

27
répondu craig_h 2016-12-13 14:03:20