Stack Overflow en español Asked by Gabriel Galeano Guerra on February 15, 2021
Quiero hacer suma, resta y multiplicación con componentes en vuejs, ejecuto mi código y funciona, hace lo que quiero, pero si inspecciono en el navegador me dice que "operacion" no es una función y es la función que uso para que corra, si me pueden corregir dicho error, agradezco, adjunto mi HTML y JS adelante.
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>VueJS Example</title>
</head>
<body>
<div id="app">
<operaciones></operaciones>
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
JS:
Vue.component('operaciones', {
props: ['value0', 'value1'],
template: `
<div>
<input type="number" :value="value0" @input="numberone = $event.target.value" >
<input type="number" :value="value1" @input="numbertwo = $event.target.value" >
<button v-on:click="operacion()">Resolver</button>
<p>Suma: {{mensaje}}</p>
<p>Resta: {{mensaje2}}</p>
<p>Multiplicación: {{mensaje3}}</p>
</div>
`,
data: function () {
return {
numberone: null,
numbertwo: null,
mensaje: null,
mensaje2: null,
mensaje3: null
}
},
computed: {
operacion() {
this.mensaje = parseInt(this.numberone) +
parseInt(this.numbertwo);
this.mensaje2 = parseInt(this.numberone) -
parseInt(this.numbertwo);
this.mensaje3 = parseInt(this.numberone) *
parseInt(this.numbertwo);
}
},
})
new Vue({
el: '#app',
});
Debe utilizar methods en lugar de computed. Los computed tienen una finalidad diferente como lo indica la documentación de vue : https://vuejs.org/v2/guide/
Vue.component('operaciones', {
props: ['value0', 'value1'],
template: `
<div>
<input type="number" :value="value0" @input="numberone = $event.target.value" >
<input type="number" :value="value1" @input="numbertwo = $event.target.value" >
<button v-on:click="operacion()">Resolver</button>
<p>Suma: {{mensaje}}</p>
<p>Resta: {{mensaje2}}</p>
<p>Multiplicación: {{mensaje3}}</p>
</div>
`,
data: function () {
return {
numberone: null,
numbertwo: null,
mensaje: null,
mensaje2: null,
mensaje3: null
}
},
methods: {
operacion() {
this.mensaje = parseInt(this.numberone) +
parseInt(this.numbertwo);
this.mensaje2 = parseInt(this.numberone) -
parseInt(this.numbertwo);
this.mensaje3 = parseInt(this.numberone) *
parseInt(this.numbertwo);
}
},
})
new Vue({
el: '#app',
});
Correct answer by Richard Víquez Pérez on February 15, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP