My app seems to be having trouble reading the value variable that I defined in the data section. It's strange because Npm compiles everything without throwing any errors.
If you want to take a look at my code, here's the fiddle link: https://jsfiddle.net/invinivi/yr164pb7/
<template>
<div id="exercise">
<div>
<p>Current Value: {{ value }}</p>
<button @click="value += 5">Add 5</button>
<button @click="value += 1">Add 1</button>
<p>{{ result }}</p>
</div>
<div>
<input type="text">
<p>{{ value }}</p>
</div>
</div>
</template>
<script>
export default {
name: 'Ex3',
el: '#exercise',
data: function () {
return {
value: 0
}
},
computed: {
result: function () {
return this.value == 37 ? 'done' : 'not there yet';
}
},
watch: {
result: function () {
var vm = this;
setTimeout(function () {
vm.value = 0;
}, 5000);
}
}
}
</script>// FILE - Ex3.vue
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<Ex3/>
</div>
</template>
<script>
import Ex3 from "./components/Ex3"
export default {
name: 'App',
components: {
Ex3
}
}
</script>