vue报错信息总结

报错信息：[Vue warn]: The data property"is already declared as a prop. Use prop default value instead

图片.png

报错原因：父组件里定义的属性并且通过props传给了子组件，子组件里不要再定义，否则会报错

报错信息：[Vue warn]: Computed property "reversedMessage" was assigned to but it has no setter.

图片.png

报错原因：你没有给计算属性设置set函数，却修改了计算属性的值，解决方案就是：给计算属性加上set函数

报错信息怎么看？

图片.png

图片.png

命名行里，不同颜色有不同含义，

白色信息表示普通信息

图片.png

蓝色表示正在编译

图片.png

绿色表示成功

图片.png

红色表示报错了

图片.png

报错信息：[Vue warn]: Do not use built-in or reserved HTML elements as component id: b

图片.png

报错原因：自定义组件的名称是'b'，而'b'是html提供的标签名，自定义组件的名称是不能跟html提供的标签名一致的

报错信息：

- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

图片.png

报错原因：.vue文件里，template下面必须只有1个子元素

图片.png

报错信息：Computed property "full_name" was assigned to but it has no setter.

图片.png

报错原因：修改计算属性的值了，但是计算属性没有setter函数，具体代码如下：

图片.png

报错信息：Module not found: Error: Can't resolve 'Form.vue' in 'C:\projects\web0401\vue\vue_demo1\src\components'

图片.png

报错原因：直接写路径，vue会去node_modules里找‘Form.vue’，找不到就报错了，注意：在vue里引入组件，跟平时html里引入js的写法略有区别，如果是当前路径，开始路径要加上'./'

报错信息：[Vue warn]: Error in v-on handler: "TypeError: "foo" is read-only"

图片.png

报错原因：可能是因为对某个对象使用了Object.freeze，导致里面所有的属性不能被改变

报错信息：[Vue warn]: Property or method "show" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in
---> at src/components/Subject.vue

图片.png

报错原因：你定义了一个变量名字叫'show'，但是在data和methods里都找不到
class的值是一个固定的字符串、class的值是一个变量和一个字符串拼接而成，这2种情况，都可以在下面的截图里找到写法：

图片.png