Question

我正在尝试使用vuejs v来检查单选按钮，仅当我的if语句为真时。有没有办法使用vuejs＆＃39; 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

您可以绑定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/

Answer 2

在处理收音机和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 3

也许有人认为这种方法有用：

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

$('#locationaddress').html();

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

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

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

Answer 4

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

<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的值可以是“ Lost”或“ Return Supplier”，并且将基于该值自动选择单选选项。

Answer 5

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

将值绑定应用到对象 (: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>

如果statement为true，则vuejs设置一个单选按钮

5 个答案: