控制台报错Cannot read properties of undefined (reading ‘0‘)

this.options[0] ? this.options[0].label : null

<script>
export default {
    // props: ['title', 'selectShow', 'options'],
    // 改成这个形式
    props: {
        options: {
            type: Array,
            default: () => []
        },
        title: {
            type: String,
            default: ''
        },
        selectShow: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            sValue: ''
        }
    },
    mounted() {
        // console.log(this.options);
// 判断有数据赋值
        this.sValue = this.options[0] ? this.options[0].label : null
    },
    methods: {
        change(e) {
            console.log(e, 'e');
            this.$emit("sValue", this.sValue, this.options[0].label)
        }
    }
}
</script>
  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果使用`includes`方法时出现`Cannot read properties of undefined (reading 'includes')`,那么很可能是因为`backendData`属性未正确初始化或者未正确赋值。 请确保在Vue组件的`data`中正确初始化`backendData`属性,并且在获取后端数据后将其赋值给`backendData`。 以下是一个示例,展示如何正确初始化和赋值`backendData`属性: ```vue <template> <div> <input type="text" v-model="input1" @blur="checkInput(input1)"> <input type="text" v-model="input2" @blur="checkInput(input2)"> <input type="text" v-model="input3" @blur="checkInput(input3)"> </div> </template> <script> export default { data() { return { input1: '', input2: '', input3: '', backendData: [], // 正确初始化为一个空数组 }; }, mounted() { // 获取后端数据并赋值给backendData // 示例中使用setTimeout模拟异步请求的过程 setTimeout(() => { const response = ['value1', 'value2', 'value3']; // 假设这是从后端接口返回的数据 this.backendData = response; }, 1000); }, methods: { checkInput(value) { if (this.backendData.includes(value)) { // 输入的值存在于后端传来的值里 const message = this.backendData.find(item => item.value === value)?.message; if (message) { alert(message); // 弹出成功信息 } } else { // 输入的值不存在于后端传来的值里 // 弹出其他信息或执行其他逻辑 } }, }, }; </script> ``` 在这个示例中,我们通过`mounted`钩子模拟异步请求后端数据的过程,并在获取到数据后将其赋值给`backendData`。这样可以确保在组件渲染时,`backendData`已经被正确初始化并且不再是`undefined`。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值