解决vue的警告附案例：Property “***“ was accessed during render but is not defined on instance.

如果是vue引入整个有问题可能会直接报错，所以如果属性警告那大概率问题在于没有设置初始值。2.原因：警告的 "***"未设置初始值，这也是我的问题，但没有看到大家指出。1.原因：vue引入有问题，很多大佬都有说到这种解决方案。解决方法：在script标签中加入setup。这个小问题不会报错，代码多的情况下挺难找的。解决方法：给该属性添加一个初始值。

文章共1,217字 · 阅读需要大约5分钟

一键AI生成摘要，助你高效阅读

问答

果果雪

9369人浏览 · 2023-08-09 21:43:02

果果雪 · 2023-08-09 21:43:02 发布

在编写vue的时候遇到了这个警告：

Propertywas accessed during render but is not defined on instance.

是一个小问题，没有报错

总结了下面2种常见的简单解决方法：

1.原因：vue引入有问题，很多大佬都有说到这种解决方案

解决方法：在script标签中加入setup

<script setup>
...
</script>

2.原因：警告的 "***"未设置初始值，这也是我的问题，但没有看到大家指出。

解决方法：给该属性添加一个初始值

 <script >
        var obj = {
            data(){       
                return{
                isAll: false, //初始值
                ...
                }
             }
          }

这个小问题不会报错，代码多的情况下挺难找的。

如果是vue引入整个有问题可能会直接报错，所以如果属性警告那大概率问题在于没有设置初始值。细心一点就好。

希望对大家有帮助~

个人案例：用vue实现购物车金额计算和动态增减删除

<!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>
    <link rel="stylesheet" href="">
    <style>
        li{
            display:flex;
            justify-content: space-around;
            padding: 10px;
        }
        li img{
            width:100px;
        }
    </style>
    <script type="text/javascript" src="../lib/vue.next.js"></script>
    <!--！！上一行记得改成自己的vue.next.js路径！！--!>
</head>
<body>

    <!-- 功能1:勾选  功能2:计算总金额 -->
    <div id="box">
        <input type="checkbox" v-model="isAll" @change="handleAllChecked"/>全选/全不选<!-- 绑定一个布尔值,change事件在他改变后才获取数值,正确-->
        <ul>
            <li v-for="(item,index) in datalist" :key="item.id"><!-- v-for遍历 -->
                <input type="checkbox" v-model="checkList" :value="item" @change="handleItemChecked"/><!-- 商品选择:双向数据绑定框 -->
                <img :src="item.pic"/><!-- 商品图片 -->
                <!-- :src动态绑定 -->

                <div><!-- 名称+价格 -->
                   <div>{{item.name}}</div>
                   <div style="color: #c03bbe;">${{item.price}}</div>
                </div>

                <div><!-- 数量 -->
                    <button @click="item.number--"  :disabled="item.number===1">-</button> <!-- 商品数量不能小于1 -->
                    <span>{{item.number}}</span>
                    <button @click="item.number++"  :disabled="item.number===item.limit">+</button><!-- 商品数量不能大于限购数量 -->
                </div>

                <div><!-- 删除商品按钮 -->
                    <button @click="handleDeleteClick(index,item.id)">delete</button>
                </div>
            </li>
        </ul>

        <div>总金额:${{sum()}}</div>
        {{checkList}} 
    </div>

    
    <script>
        var obj = {

            data(){
                return{
                isAll: false, //初始值
                checkList:[],//勾选的购物车数据
                 datalist:[{//所有的购物车数据
                    name:"商品1",
                    price:10,
                    number:1,
                    id:1,
                    limit:10,//限购
                    pic:" https://img1.baidu.com/it/u=1967065197,716971243&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677344400&t=8a1882c11a23d159b36c8912723d67b9"
                },
                {
                    name:"商品2",
                    price:12,
                    number:2,
                    id:2,
                    limit:5,
                    pic:"https://img1.baidu.com/it/u=1967065197,716971243&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677344400&t=8a1882c11a23d159b36c8912723d67b9"
                },
                {
                    name:"商品3",
                    price:45,
                    number:3,
                    id:3,
                    limit:10,
                    pic:"https://img1.baidu.com/it/u=1967065197,716971243&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677344400&t=8a1882c11a23d159b36c8912723d67b9"
                },
                {
                    name:"商品4",
                    price:17.5,
                    number:1,
                    id:4,
                    limit:5,
                    pic:"https://img1.baidu.com/it/u=1967065197,716971243&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1677344400&t=8a1882c11a23d159b36c8912723d67b9"
                }
            ]
            }
            },
            methods:{
                sum(){
                    var total = 0
                //累加计算checkList数组中每一项的:价格*数量
                this.checkList.forEach(item => {
                    total+=item.price*item.number
                })
                    return total
                },
                handleDeleteClick(index,id){
                    //删除datalist靠index索引
                    this.datalist.splice(index,1)//splice(从几号索引开始删除,删除几个)
                    //删除checklist靠匹配id
                    this.checkList = this.checkList.filter(item=>item.id!==id)//过滤:更新checkList,返回剩下的未被过滤掉的元素(id与被删商品id不符的)

                    //状态同步，完善全选删除状态反馈
                    this.handleItemChecked()
                },
                
                //比较两数组长度,长度相等为全选
                handleAllChecked(){
                    if(this.isAll){
                        this.checkList = this.datalist
                    }else{
                        this.checkList = []
                    }
                },
                //每项选择:选中为全选,取消为全不选
                handleItemChecked(){
                    if(this.checkList.length===this.datalist.length){
                        this.isAll = true
                    }else{
                        this.isAll = false
                }
            }
        }
    }
       var vm = Vue.createApp(obj).mount("#box")//引入vue
    </script>
    
</body>
</html>