vue在html中的报错

为啥会报这个错

<body>
    <div id="app">
    <h1>小黑记事本</h1>
        <div class="box">
            <input type="text" class="ipt" placeholder="请输入任务">
            <button >添加任务</button>
        </div>
        <section class="liebiao">
            <ul class="make-list">
                <li class="make" v-for="(item, index) in list" :key="item.id">
                    <div class="view"> 
                        <span class="index">{{index + 1}}.</span> <label >{{item.name}}</label>
                        <button @click="del(item.id)" class="destory">X</button>
                    </div>
                </li>
            </ul>
        </section>
    </div>
    
    <script>
        var app =Vue.createApp({
            data(){
                return {
                    list:[
                        {id: 1,name: '看书两小时'},
                        {id: 2,name: '跑步40分钟'}
                    ],
                    methods: {
                        del(id){
                            this.list =this.list.filter(item => item.id !== id)
                            // console.log(id)
                        }
                    }
                }
            }
        }).mount('#app')
    </script>
</body>

点击删除按钮报错：

methods是和data同级的，在data里面它找不到del，除非用methods.del

不知道你这个问题是否已经解决, 如果还没有解决的话:

这个问题的回答你可以参考下: https://ask.csdn.net/questions/7577196
你也可以参考下这篇文章：【Vue】html调用vue组件实例函数以及动态修改变量的值
您还可以看一下陶国荣老师的Vue.js基础知识入门与提升视频教程课程中的组件的使用——动态传值小节, 巩固相关知识点
除此之外, 这篇博客: vue打包访问html报错中的 vue打包报错，访问html文件报错 部分也许能够解决你的问题。

以下回答由chatgpt基于相关博客总结生成:

这个错误是因为在Vue中，方法应该定义在methods选项中，而不是定义在data选项中。所以，只需要将methods选项从data选项中移出来即可解决问题。

以下是修改后的代码：

<body>
    <div id="app">
        <h1>小黑记事本</h1>
        <div class="box">
            <input type="text" class="ipt" placeholder="请输入任务">
            <button>添加任务</button>
        </div>
        <section class="liebiao">
            <ul class="make-list">
                <li class="make" v-for="(item, index) in list" :key="item.id">
                    <div class="view"> 
                        <span class="index">{{ index + 1 }}</span>
                        <label>{{ item.name }}</label>
                        <button @click="del(item.id)" class="destory">X</button>
                    </div>
                </li>
            </ul>
        </section>
    </div>

    <script>
        var app = Vue.createApp({
            data() {
                return {
                    list: [
                        { id: 1, name: '看书两小时' },
                        { id: 2, name: '跑步40分钟' }
                    ]
                }
            },
            methods: {
                del(id) {
                    this.list = this.list.filter(item => item.id !== id)
                    // console.log(id)
                }
            }
        }).mount('#app')
    </script>
</body>

请注意，在修改后的代码中，del方法已经被移动到了正确的位置。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^


var app = Vue.createApp({
                    data() {
                        return {
                            list: [{
                                    id: 1,
                                    name: '看书两小时'
                                },
                                {
                                    id: 2,
                                    name: '跑步40分钟'
                                }
                            ],
                        }
                    },
                    methods: {
                        del(id) {
                            this.list = this.list.filter(item => item.id !== id)
                            // console.log(id)
                        }
                    }
                 }).mount('#app')

加上function 看看

methods: {
                       function  del(id){
                            this.list =this.list.filter(item => item.id !== id)
                            // console.log(id)
                        }
                    }