vue3 new joiner, why @click not work on a button in follow vue3 codes

September 14, 2022

Following codes, I am confused why add1 function not work on button click? please note codes are saved as html file and run in chrome.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>

<div id="app">
    <!-- TODO: this is the place for my quesiton, why add1 doesn't work -->
    <button @click="add1">
        Hello, count is {{count}}
    </button>
</div>

</body>
</html>

<script>

    const app = Vue.createApp({
            data() {
                return {
                    count: 0
                }
            }
        },

        methods = {
            add1() {
                alert("Click!")
                count++
            }
        }
    )
    app.mount('#app')

</script>

The warn/error msg i see in google developer console is: Property "add1" was accessed during render but is not defined on instance. and, Extraneous non-props attributes (add1) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

>Solution :

Your app declaration has syntax errors and does not include methods. Try:

const app = Vue.createApp({
  data () {
    return {
      count: 0
    }
  },
  methods: {
    add1 () {
      alert("Click!")
      count++
    }
  }
})
app.mount('#app')