麻瓜爱提问

爱美丽007

已于 2023-01-06 12:01:53 修改

阅读量405

点赞数

文章标签：前端 javascript

于 2022-11-30 10:29:52 首次发布

本文链接：https://blog.csdn.net/weixin_63456913/article/details/128110512

版权

1、平时有内容的地方突然没有内容了？

首选解疑：查看接口数据有没有，没有就做判断

2、接口怎么找

根据渲染数据用得接口，去对应地方查找（此处务必细心，严谨~~~慢慢地找）

生活无处不是配配乐啊

3、vue中，使用v-if，判断数组长度，length报错

需要判空，v-if="data&&data.length > 0"

原理：vue的数据绑定在刚开始只是和内存建立联系，并没有真正的和后台的数据挂上钩，所以一开始的seller.supports只是一个空值，必须在之前加上v-if，确保有值以后再开始计算length

4、设置Element Radio组件label绑定的值不显示

 <el-radio v-model="radio" label="1"></el-radio>

 <el-radio v-model="radio" label="1">{{''}}</el-radio>

5、JSON文件的读取

getCityData() {
            cityData.find((item, index) => {
                item.label = item.name;
                item.value = index;
                item.children = item.city;
                item.children.find((childItem, childIndex) => {
                    childItem.label = childItem.name;
                    childItem.value = childIndex + 1000;
                    if (childItem.area) {
                        childItem.children = childItem.area;
                        childItem.children.find((grandsonItem, grandsonIndex) => {
                            grandsonItem.label = grandsonItem.name;
                            grandsonItem.value = grandsonIndex + 10000;
                        })
                    }
                })
            })
            this.cityData = cityData;
            console.log('城市', cityData);
        },

html

<div class="orderform_inputbox">
                <div class="title">请选择房屋所在城市</div>
                <el-cascader v-model="cityValue" :options="cityData" :props="optionProps"
                    @change="handleChange"></el-cascader>
            </div>

以上js用得方法：js实现数组转树形数据

6、elementUI_el-radio踩坑_设置点击事件会触发两次

原因:

elementui中，el-radio控件包含了label和input标签，在el-radio上设置了点击事件，让两个标签都拥有了该事件，所有click方法被调用了2次。

解决方法：

@click.prevent 阻止事件的默认行为