背景:
线上商城下订单的时候,用户选择存在localstroge中的地址。
父组件:选择地址的页面。selectAdd下的index.vue
子组件:每一个地址。(CheckBox+地址)
要实现只能选择一个地址确认。
我前后考虑了几种做法。
第一种是用了一个计数器count,CheckBox的值改变时触发change函数,给count加减。主要代码如下:
<van-checkbox v-model="checked" @change="select"></van-checkbox>
data(){
return{
checked:false,
count:0,
}
},
methods:{
select(checked){
if (checked){
this.count+=1;
}
else{
this.count-=1;
}
}
},
但是问题很奇怪,我确定每次改变都会触发select函数,并且都执行了对count的操作,但是结果不会保存。
举个例子:选择了第一个地址输出是this.count=1,选择第二个地址输出还是this.count=1,并且调试时发现,在第二次执行this.count+=1;
之前,this.count的值为0。减法也是。
第二种方法是change改变之后emit发送信号给父组件。但是父组件无法接收到信号。调试确定子组件执行了emit这一步。
this.$emit("change",{checked});
父组件:
<AddItem v-for="(add,index) in List"
:key="index"
@change="handle" />
然后methods接收:
handle(){
console.log("1111");
},
但是父组件就是无法接收。
第三种就是直接监视父组件,给父组件增加ref属性,console.log的时候发现ref获得的节点是有子组件的全部属性,也就包括checked属性:
<AddItem v-for="(add,index) in List"
:key="index"
ref="Item" />
点击确认按钮时触发函数,问题解决:
backToOrder(){
let items = this.$refs.Item;
let count = 0;
for (let i in items)
if (items[i].checked)
count++;
if (count!=1)
{
this.$dialog.alert({message:"您到底想要哪个地址呢~"});
console.log(count);
}
不过前面到底是为什么不可以呢,有人遇到过相似的问题吗。