正在努力学习的小白袁 2024-07-14 10:22 采纳率: 90%
浏览 23
已结题

Vue3数据单项渲染报错

错误信息:Property "msg" was accessed during render but is not defined on instance.

img

代码,为什么会报错呀?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
       <h1>{{msg}}</h1> 
    </div>

    <script type="module" >
        import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"

        createApp({
            date() {
                msg:'hello';
                return {
                    msg
                }
            }
        }).mount("#app")

    </script>
</body>

</html>


  • 写回答

4条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-07-14 10:22
    关注

    引自免费微信小程序:皆我百晓生

    在你的代码中,msg属性是在一个名为date的方法内部定义的,而不是在组件的data对象中定义的。因此,当Vue渲染模板时,它无法找到msg属性,从而引发错误。为了解决这个问题,你需要将msg属性移动到组件的data对象中。这是修改后的代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <div id="app">
           <h1>{{ msg }}</h1> 
        </div>
    
        <script type="module" >
            import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    
            createApp({
                data() {
                    return {
                        msg: 'hello'
                    }
                }
            }).mount("#app")
        </script>
    </body>
    
    </html>
    

    在这个修正后的版本中,msg被定义在组件的data对象中,这样Vue在渲染模板时就能找到它了。注意在Vue中,组件的data对象必须是一个函数,这样每次创建新实例时,都可以保证数据的唯一性。

    评论 编辑记录

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 7月14日
  • 修改了问题 7月14日
  • 创建了问题 7月14日