vuejs 设置一个单选按钮检查语句是否为真

Question

我正在尝试使用 vuejs v-for 仅在我的 if 语句为真时检查单选按钮。有没有办法使用 vuejs 的 v-if/v-else 来解决这类问题？

在 php 和 html 中，我可以通过执行以下操作来实现：

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

以下是我目前使用 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>

我知道这里的 v-if 语句用于检查是否显示或隐藏输入。

非常感谢任何帮助。

Answer 1

以下是跟踪所选单选按钮的示例，通过

• 将值绑定应用到对象 (:value="portal") 和
• 将 v-model 绑定应用到当前选定的对象 (v-model="currentPortal")。

当两者匹配时，单选按钮将由 Vue 自动检查（不需要:checked 绑定！）。

带有组合 API 的 Vue 3

Vue.createApp({
  setup() {
    const portals = [{
      id: 1,
      name: "Portal 1"
    }, {
      id: 2,
      name: "Portal 2"
    }];
    
    const currentPortal = portals[1];
    
    return {
      portals,
      currentPortal
    }
  }
}).mount("#app");

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <template v-for="portal in portals">
    <input 
      type="radio" 
      :id="portal.id"
      name="portalSelect" 
      :value="portal" 
      v-model="currentPortal">

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

Answer 2

如果您可以根据自己的逻辑进行调整，则可以遵循以下选项：

<div class="combination-quantity">
    <input type="radio" value="Lost" 
    v-model="missing_status">
    <label for="lost">Lost</label>
    <br>
    <input type="radio" value="Return Supplier" v-model="missing_status">
    <label for="return_supplier">Return Supplier</label>
</div>

missing_status 的值可以是“丢失”或“返回供应商”，并且会根据值自动选择单选选项。

Answer 3

也许有人觉得这种方法有用：

在模板中，我为每个单选按钮分配一个值：

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

然后在组件中我设置值，即：

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

在这种情况下，vue 将选择第二个单选按钮。

Answer 4

在处理无线电和 vue.js 时，我想指出一些选项。通常，如果您需要动态绑定属性值，您可以使用速记绑定语法来绑定并计算该值。您可以绑定到数据、计算值或方法以及三者的组合。

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>

Answer 5

您可以像这样绑定checked 属性：

<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>

简单示例：https://jsfiddle.net/b4k6tpj9/