I have a unique Vue application setup like this:
index.html structure:
<!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 id="bag"></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>
</body>
</html>
main.js code, rendering the App.vue file in the render function:
import Vue from 'vue'
import App from './App.vue'
import './assets/styles/global.styl'
new Vue({
el: '#app',
render: h => h(App),
})
The styles defined in my style.css file are as follows:
#bag {
width: 200px;
height: 500px;
margin: 0 auto;
background: url(../imgs/02.png) center no-repeat;
background-size: 80%;
}
#bag-helth {
width: 200px;
border: 2px #000 solid;
margin: 0 auto 20px auto;
}
#bag-helth div {
height: 20px;
background: crimson;
}
#control {
width: 200px;
margin: 0 auto;
text-align: center;
}
The code for my Vue.app, with the export default section included:
<template>
</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>
Upon testing in the browser, I noticed there is no response when clicking the buttons.
EDIT-1
After investigating, I discovered that by adding the value {{ helth }} within the #bag div in index.html:
<div id="app">
<div id="bag">{{ helth }}</div>
...
The template does not interpret the data correctly: