vue方法的问题

cqwcns · 发表于 2022-6-28 16:45

想用vue写一个本地web应用（本地运行，所以不用CLI），刚刚学，遇到了一些问题，请指教。

HTML是这样的：

[HTML] 纯文本查看 复制代码

<!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>
    <script src="./assets/js/vue.global.js"></script>
    <link href="./assets/css/tailwind.min.css" rel="stylesheet">
</head>

<body>

    <div id="app">

        <div class="w-screen h-screen">
            <button @click="mytext='新测试'">{{mytext}}</button>
            <button @click="dosomething">{{mytext}}</button>
        </div>

    </div>

    <script src="./assets/js/index.js"></script>

</body>

</html>

JS是这样的：

[JavaScript] 纯文本查看 复制代码

const Counter = {
    data() {
        return {
            mytext: '测试'
        }
    },
    mounted() {

        // dosomething() {
        //     console.log('9999')
        // }
        // 官方demo是这样写的，但这样写vscode会报错

        dosomething: () => {
            console.log('执行了')
        }



    }
}
Vue.createApp(Counter).mount('#app')

运行直接报错：[Vue warn]: Property "dosomething" was accessed during render but is not defined on instance. at <App>

请问，这种报错代码应该怎么改，感谢指教。

Mr.Lih · 发表于 2022-6-28 17:01

mounted 是生命周期函数 methods 里面才是写方法的

Mr.[先知] · 发表于 2022-6-28 17:06

dosomething写的位置不对
mounted 是生命周期函数
意思是挂载时

[JavaScript] 纯文本查看 复制代码

mounted() {
this.aaa()
}
methods:{
aaa:()=>{
console.log('输出了')
}
}

lucklys · 发表于 2022-6-28 17:20

[JavaScript] 纯文本查看 复制代码

   mounted() {
            console.log('执行了')
 
    }

冰茶荼 · 发表于 2022-6-28 17:54

[JavaScript] 纯文本查看 复制代码


const Counter = {
  data() {
    return {
        mytext: '测试'
    }
  },
  mounted() {
  },
  methods:{
    dosomething(){
        console.log('执行了')
    }
  }
}
Vue.createApp(Counter).mount('#app')

帐号		自动登录	找回密码
密码			注册[Register]

[求助] vue方法的问题

免费评分

免费评分

免费评分