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>
The problem you had was that you were expecting a property of the data to be what is called "reactive" (When it detects changes, it changes the others in turn). In order for you to achieve reactivity you must create computed methods that detect changes in the variables they depend on and update their value immediately. You can only do this inside the block
computed
and once you define a property you can use it as if it were another variable in your template (html).With the changes that I propose below it will work for you
(Try it in full page so that the input is visible)
It is not that you cannot send the values, but that they do not exist when the function is invoked, it is in the process of creating and updating the variables, so you must use mounted , which is executed later when I have finished creating the variables.
would be something like this