VueJS 最初将第一个单选按钮标记为“已选中" [英] VueJS initially mark first radiobutton as 'checked'

查看：36
本文介绍了VueJS 最初将第一个单选按钮标记为“已选中"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我最初如何将第一个单选按钮标记为已选中"?

items =[{txt: 'foo', val: 1},{txt: 'bar', val: 2}]<div v-for="项目中的项目"><input name="myfield" type="radio" v-bind:value="item.val" v-bind:checked="item.val==comparisonvalue"><label>{{ item.txt }}</label>

解决方案

您可能希望使用 v-model 将 input 绑定到您的数据，在这种情况下在您的数据中设置一个项目(例如 myInput)，然后使用您的项目数组中的第一个值对其进行初始化:

new Vue({el: '#app',数据: {我的输入:1，项目:[{txt: 'foo', val: 1},{txt: 'bar', val: 2}]}})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><div id='应用程序'><div v-for="项目中的项目"><输入名称=我的领域"类型=收音机"v-bind:value="item.val"v-model="myInput"><label>{{ item.txt }}</label>

<小时>

在大多数情况下，您可能会从 API 调用中获取 items，然后您可以在 created 中对其进行初始化:

new Vue({el: '#app',数据: {我的输入:空，项目:空},创建(){this.items = [{txt: 'foo', val: 1},{txt: 'bar', val: 2}]//或来自 API 调用this.myInput = this.items[0].val}})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><div id='应用程序'><div v-for="项目中的项目"><输入名称=我的领域"类型=收音机"v-bind:value="item.val"v-model="myInput"><label>{{ item.txt }}</label>

<小时>

或者获取v-for中的index，然后检查input处是否index === 0>:

new Vue({el: '#app',数据: {项目:[{txt: 'foo', val: 1},{txt: 'bar', val: 2}]}})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script><div id='应用程序'><div v-for="(item, index) in items"><输入名称=我的领域"类型=收音机"v-bind:value="item.val"v-bind:checked="index === 0"><label>{{ item.txt }}</label>

How can I initially mark first radio-button as 'checked'?

items =
  [
    {txt: 'foo', val: 1},
    {txt: 'bar', val: 2}
  ]


<div  v-for="item in items">
   <input name="myfield" type="radio" v-bind:value="item.val" v-bind:checked="item.val==comparisonvalue">
   <label>{{ item.txt }}</label>
</div>

解决方案

You probably want to use v-model to bind the input to your data, in which case set an item (e.g. myInput) in your data and then initialize it with the first value in your items array:

new Vue({
  el: '#app',
  data: {
    myInput: 1,
    items:
      [
        {txt: 'foo', val: 1},
        {txt: 'bar', val: 2}
      ]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id='app'>
  <div v-for="item in items">
    <input 
      name="myfield" 
      type="radio"  
      v-bind:value="item.val"
      v-model="myInput">
    <label>{{ item.txt }}</label>
  </div>
</div>

Under most circumstances, you might get the items from an API call, and then you can initialize it in created:

new Vue({
  el: '#app',
  data: {
    myInput: null,
    items: null
  },
  created () {
    this.items = [
        {txt: 'foo', val: 1},
        {txt: 'bar', val: 2}
      ]   // or from an API call
    this.myInput = this.items[0].val
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id='app'>
  <div v-for="item in items">
    <input 
      name="myfield" 
      type="radio"  
      v-bind:value="item.val"
      v-model="myInput">
    <label>{{ item.txt }}</label>
  </div>
</div>

Or get the index in v-for and then check whether index === 0 at the input:

new Vue({
  el: '#app',
  data: {
    items:
      [
        {txt: 'foo', val: 1},
        {txt: 'bar', val: 2}
      ]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id='app'>
  <div v-for="(item, index) in items">
    <input 
      name="myfield" 
      type="radio"  
      v-bind:value="item.val" 
      v-bind:checked="index === 0">
    <label>{{ item.txt }}</label>
  </div>
</div>

这篇关于VueJS 最初将第一个单选按钮标记为“已选中"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆