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

Question

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.

TheAlexLichter · Accepted Answer · 2022-09-15 09:20:26Z

2

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

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

edited Sep 15, 2022 at 9:20

answered Sep 14, 2022 at 9:16

TheAlexLichter

7,3328 gold badges50 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dracrays Over a year ago

Thanks! I compare the codes and find out where I am wrong. BTW, it seems here I need use this.count++, simple count++ not work, right?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related