[Vuejs]-Why the bind click event do not response?

by

0👍

Put your html codes in App.vue file between template tags, not in index.html. so your index.html will be like 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>vuejs-test01</title>

 <link href="./src/assets/styles/style.css" type="text/css" rel="stylesheet"  >
</head>
<body>
 <div id="app"></div>
 <script src="/dist/build.js"></script>
</body>
</html>

and your App.vue be like

<template>
 <div id="app">
    <div id="bag">{{helth}}</div>

  <div id="bag-helth">
    <div :style="{ width:helth + '%' }"></div>
  </div>

  <div id="control">
    <button @click="punch" v-show="!ended">click</button>
    <button @click="restart">restart</button>
  </div>
 </div>
</template>

<script>

  export default {
    data: {
      helth: 100,
      ended: false,
    },
    methods: {
      punch: function () {
        this.helth -= 10

        if (this.helth <= 0) {
          this.ended = true
        }
      },
      restart: function () {
        this.helth = 100
        this.ended = false
      }
    }
  }
</script>

<style scoped>

</style>
👤Mohd_PH

0👍

There are some places wrong in your project:

  1. You should put the template code in your App.vue:

      <div id="bag-helth">
    <div :style="{ width:helth + '%' }"></div>
  </div>

  <div id="control">
    <button @click="punch" v-show="!ended">click</button>
    <button @click="restart">restart</button>
  </div>
</div>

In your index.html, you should keep a empty div <div id="app"></div> and build.js like bellow:

<body>
  <div id="app"></div>
  <script src="/dist/build.js"></script>
</body>

So, in the main.js then can render the App.vue to the index.html <div id="app"></app>:

new Vue({
  el: '#app',
  render: h => h(App)  // there render the App.vue to the el node.
})

  1. The App.vue is a component, not a Vue instance, the data should be a function:

    export default {
  data: function() {
    return {
      helth: 100,
      ended: false
    }
  },
...
👤aircraft

Leave a comment