I'm starting in this vuejs and I'm trying to use the value of an input in some functions that I have created and display the result in an html table
What I want to achieve is that when inserting a value to the input, it performs the calculations that my functions do and the result is displayed in the table
this is my js file in which I create the vue instance and have the functions, clarify that the functions by giving them a constant outside the vue instance work fine for me, but I can't give them the input value
const per_atk_hp_def = 1.2;
const buff_atk = 0.5;
const add_atk_set = (atk = 0, percentage) => {
const calc = atk * percentage
return calc
};
const buff = (atk = 0, buff) => {
const calc = atk + atk * buff;
return calc;
};
const app = new Vue ({
el: '#app',
data: {
atk_i: '', //input
atk_added_set: add_atk_set(this.atk_i, per_atk_hp_def),
atk_buffed_ws: buff(this.atk_added_set, buff_atk),
atk_buffed_wos: buff(this.atk_i, buff_atk)
}
})
and this would be my input
<input type="number" v-model="atk_i" class="form-control" placeholder="Attack" onKeyPress="if(this.value.length==5) return false;" ng-model="number" min="0">
and the table
<table class="table table-bordered table-sm table-dark table-striped">
<thead>
<tr>
<th scope="col" colspan="5" class="text-center">
<span>
Buff Attack Up
</span>
</th>
</tr>
<tr>
<th scope="col" width="90px" class="text-center"> Set </th>
<th scope="col">BASE</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">With</th>
<td>{{atk_buffed_ws}}</td>
</tr>
<tr>
<th scope="row">Without</th>
<td>{{atk_buffed_wos}}</td>
</tr>
</tbody>
</table>