Just starting out with Vue and JavaScript, but making progress!
Currently working on a Vue Main App that includes a sub-component for a form (specifically to calculate the difference between 2 values).
I want the form values to reset to their initial state when the "Reset" button in the main App is clicked.
However, I'm facing two issues:
- Clicking the "Calculate Difference" button reloads the page.
- The "Reset" function doesn't seem to reset the values back to the initial state as expected. It appears that the event is not properly reaching the sub-component.
Upon loading the page, I encountered a warning message that I am unable to decipher:
[Vue warn]: Property "reset" was accessed during render but is not defined on the instance. at
Below is a sample of the entire one-page code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Difference</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<br> Modify Values, Click "Calculate Difference", then "Reset" to Set Back to 0
<br>
<calculator v-on:reset="reset" :start_val="0" :end_val="0"> </calculator>
<br>
<button class="button" v-on:click="onResetButton()"> Reset </button>
</div>
</body>
<script>
const vm = Vue.createApp({
emits: {
'reset': null
},
methods: {
onResetButton() {
console.log("emitting onResetButton")
this.$emit('reset');
},
},
})
vm.component('calculator', {
props: ['start_val', 'end_val'],
data() {
return {
calculator: {
start_val: this.start_val,
end_val: this.end_val,
difference: this.end_val - this.start_val,
},
}
},
methods: {
onDifference() {
console.log("calculating difference...")
this.calculator.difference = this.calculator.end_val - this.calculator.start_val
console.log(this.calculator.difference)
},
reset() {
calculator.start_val = this.start_val
calculator.end_val = this.end_val
caculator.difference = this.end_val - this.start_val
console.log("resetting calculator")
}
},
template: `
<hr>
<form>
<br> Start Value : <input class="input" type="number" v-model.number="calculator.start_val">
<br> End Value : <input class="input" type="number" v-model.number="calculator.end_val">
<br> <button class="button" v-on:click="onDifference()">Calculate Difference </button>
</form>
<p>Difference : {{ calculator.difference }} </p>
<hr>
`
})
vm.mount('#app');
</script>
</html>