在编写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>
