Vue，在v-for中遍历含有多个对象的数组时，实现单选框

一、情况1、在收货地址选择时，往往要在多个地址中选择一个收货地址，这就涉及到了v-for遍历包含多个地址对象的数组，数组如下recipient_list: [{id: 0,is_default: false,name: "李四",phone_num: "12365478941",},{id: 1,

AokiYip

2676人浏览 · 2021-08-25 14:48:29

AokiYip · 2021-08-25 14:48:29 发布

一、情况

1、在收货地址选择时，往往要在多个地址中选择一个收货地址，这就涉及到了v-for遍历包含多个地址对象的数组，

数组如下

new Vue({
    el:'.op',
    data:{

         //用来表示已选的项，单选时定义为字符串
        choose_a:"",


        //需要遍历的数组

        list:[
        {id:1,name:"狗"},
        {id:2,name:"猫"},
        {id:3,name:"猪"},
        {id:1,name:"鸡"},
        {id:1,name:"虎"},
        {id:1,name:"鸭"}, 
        ]
    }
    
    
    })

2、在遍历时、给input使用v-model绑定上面定义choose_a作为已经选择的标志，还要给input的value值绑定待选项的名字


//这里的id和class不影响
<div id="op" class="op"> 

  //用来遍历的div，给input用v-for不好写待选项的名字显示，这里用div后面可以直接用span写每一项的名字
        <div v-for="(i,index) in dlist" :key=index> 

            <input type="radio" v-model="choose_a" :value="i.name">
                
                //每一个选框的所代表的动物 与上面input里的:value="i.name"对应
               <span> {{i.name}} </span>
        </div>

            //展示已选
         <span>已选：{{choose_a}}</span>
</div>

效果图

3、全部代码，需要vue.js的可以去官网下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="op" class="op"> 
        <div v-for="(i,index) in dlist" :key=index> 
            <input type="radio" v-model=" choose_a" :value="i.name">
                {{i.name}}
        </div>
         <span>已选：{{choose_a}}</span>
    </div>
</body>

<script src="./vue.js"></script>
<script>
    new Vue({
    el:'.op',
    data:{
        choose_a:"",
        dlist:[
        {id:1,name:"狗"},
        {id:2,name:"猫"},
        {id:3,name:"猪"},
        {id:1,name:"鸡"},
        {id:1,name:"虎"},
        {id:1,name:"鸭"}, 
        ]
    }
    
    
    })

</script>
</html>

二、教训

一开始用监听器去做，直接在监听器里调用了show_checkbox（）函数，造成了每一次show_checkbox（）修改数组里的值时都会再一次触发监听器，然后就是无限套娃，递归爆炸

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^