为什么@click 不适用于 vue js 中的 h1 标签答案

【问题标题】：Why @click is not working on h1 tag in vue js为什么@click 不适用于 vue js 中的 h1 标签
【发布时间】：2022-01-21 00:51:17
【问题描述】：

<!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>Vue js 01</title>
    

</head>
<body>
  <div >
    <h1   id="message" @click="update">{{message}}</h1>
  </div>


    <script src="https://unpkg.com/vue@next"></script>
    <script>
        let app = Vue.createApp({
            data(){
                return {
                    message:'hai welcome to vue 3!',
                 }
            },
            methods:{
                update(){
                 this.message='Changed'
                }
            }
        })

        app.mount("#message")
    </script>
</body>
</html>

为什么点击 h1 标签时这不起作用 当我单击此 h1 标签时，它不起作用。但如果它在 <div> 内，则可以将其 id 移至此 div

【问题讨论】：

标签： html vue.js

【解决方案1】：

我认为是因为格式错误

id 应该在父标签或包装器中，以便其子组件可以使用其选项。

<!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>Vue js 01</title>


</head>

<body>
  <div id="message">
    <h1 @click="update">{{message}}</h1>
  </div>


  <script src="https://unpkg.com/vue@next"></script>
  <script>
    let app = Vue.createApp({
      data() {
        return {
          message: 'hai welcome to vue 3!',
        }
      },
      methods: {
        update() {
          this.message = 'Changed'
        }
      }
    })

    app.mount("#message")
  </script>
</body>

</html>

【讨论】：

总是最好将您更改的内容和原因添加到答案中，而不是更改代码并让人们玩“Spot the Differences”。答案不仅仅是 OP。
你没有看到这个I think because of a formatting error在答案@HereticMonkey
好吧，想象一下你从谷歌那里得到了这个问题，寻找你的@click 不起作用的原因。你得到一个答案，它所说的只是“存在格式错误”。它没有告诉您该格式错误是什么，您必须逐行比较问题和答案之间的代码，以发现答案将 id 从h1 移动到父div。然而，回答者可能一开始就将其写入答案。如果回答者能解释为什么 h1 上的 id 不起作用，那就更好了...