web-dev-qa-db-fra.com

vuejs définit un bouton radio coché si la déclaration est vraie

J'essaie de faire cocher un bouton radio en utilisant vuejs v-for que si ma déclaration if est vraie. Existe-t-il un moyen d'utiliser v-if/v-else de vuejs pour ce type de problème? 

en php et html, je peux y parvenir en procédant comme suit:

<input type="radio" <? if(portal.id == currentPortalId) ? 'checked="checked"' : ''?>>

Ci-dessous, voici ce que j’ai utilisé jusqu’à présent avec Vuejs: 

<div v-for="portal in portals">
 <input type="radio" id="{{portal.id}}" name="portalSelect"
   v-bind:value="{id: portal.id, name: portal.name}"
   v-model="newPortalSelect"
   v-on:change="showSellers"
   v-if="{{portal.id == currentPortalId}}"
   checked="checked">
 <label for="{{portal.id}}">{{portal.name}}</label>
</div>

Je sais que l'instruction v-if est ici pour vérifier si afficher ou masquer l'entrée. 

Toute aide serait très appréciée.

vue.js
21
rniocena

Vous pouvez lier l'attribut checked comme ceci:

<div v-for="portal in portals">
  <input type="radio"
         id="{{portal.id}}"
         name="portalSelect"
         v-bind:value="{id: portal.id, name: portal.name}"
         v-model="newPortalSelect"
         v-on:change="showSellers"
         :checked="portal.id == currentPortalId">

  <label for="{{portal.id}}">{{portal.name}}</label>
</div>

Exemple simple: https://jsfiddle.net/b4k6tpj9/

59
Pantelis Peslis

Peut-être que quelqu'un trouve cette approche utile:

Dans le modèle, j'attribue une valeur à chaque bouton radio:

<input type="radio" value="1" v-model.number="someProperty">
<input type="radio" value="2" v-model.number="someProperty">

Ensuite, dans le composant, je définis la valeur, à savoir:

data: function () {
    return {
        someProperty: 2
    }
}

Et dans ce cas, vue sélectionnera le deuxième bouton radio.

0
Aleph-null

Je voudrais souligner quelques options s’agissant des radios et de vue.js. En général, si vous devez lier de manière dynamique une valeur d'attribut, vous pouvez utiliser la syntaxe de liaison abrégée pour lier et calculer cette valeur. Vous pouvez vous lier à des données, une valeur calculée ou une méthode et une combinaison des trois.

new Vue({
  el: '#demo',
  data() {
    return {
      checkedData: false,
      checkedGroupVModel: "radioVModel3", //some defaul
      toggleChecked: false,
      recalculateComputed: null
    };
  },
  computed: {
    amIChecked() {
      let isEven = false;
      if (this.recalculateComputed) {
        let timeMills = new Date().getMilliseconds();
        isEven = timeMills % 2 === 0;
      }
      return isEven;
    }
  },
  methods: {
    onToggle() {
      this.toggleChecked = !this.toggleChecked;
      return this.toggleChecked;
    },
    mutateComputedDependentData() {
      this.recalculateComputed = {};
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="demo">
  <div>
    <div>
      <span>Simple Radio Group - Only one checked at a time. Bound to data.checkedData</span><br>
      <label>Radio 1 - inverse of checkedData = {{!checkedData}}
        <input type="radio" name="group1" value="radio1" :checked="!checkedData">
      </label><br>
      <label>Radio 2 - checkedData = {{checkedData}}
        <input type="radio" name="group1" value="radio2" :checked="checkedData">
      </label><br>
      <span>Understanding checked attribute: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-checked</span>
    </div>
    <br>
    <div>
      <span>Simple Radio - Checked bouned to semi-random computed object</span><br>
      <label>Radio 1: {{amIChecked}}
        <input type="radio" :checked="amIChecked">
      </label> &nbsp;
      <label>Recalculate Computed Value
        <button type="button" @click="mutateComputedDependentData">Click Me Several Times</button>
      </label>
    </div>
    <br>
    <div>
      <span>Simple Radio Group - v-model bound value = {{checkedGroupVModel}}</span><br>
      <label>Simple Radio 1:
        <input type="radio" name="vModelGroup" value="radioVModel1" v-model="checkedGroupVModel">
      </label><br>
      <label>Simple Radio 2:
        <input type="radio" name="vModelGroup" value="radioVModel2" v-model="checkedGroupVModel">
      </label><br>
      <label>Simple Radio 3:
        <input type="radio" name="vModelGroup" value="radioVModel3" v-model="checkedGroupVModel">
      </label>
    </div>
    <br>
    <div>
      <span>Simpe Radio - click handler to toggle data bound to :checked to toggle selection</span><br>
      <label>Toggle Radio = {{toggleChecked}}
        <input type="radio" :checked="toggleChecked" @click='onToggle()'>
      </label>
    </div>
  </div>
</div>

0
steven87vt