0
188
ViewsEl resultado de Dynamic JS no se carga en Vue.js
Hice una calculadora de cotizaciones en JS simple en Codepen y quedé satisfecho con los resultados.
Ahora, estoy tratando de reutilizar esta calculadora, que funcionó bien, dentro de mi proyecto Vue.js. Pero por alguna razón, la consola me da este error cuando trato de usar la calculadora:
Sospecho que es el cambio de JS simple a Vue lo que está estropeando algo, pero ¿alguien podría aclararme qué es lo que estoy pasando por alto?
Gracias por adelantado
<form> <div class="calculator-variables"> <input type="text" min="0" max="100" id="churnRate" onchange="CalculateEstimate();" /> <input type="text" min="0" max="100" id="invoulentaryChurn" onchange="CalculateEstimate();" /> <input type="text" id="contributionMargin" onchange="CalculateEstimate();" /> <output id="output">0</output> <input id="customerNumber" type="range" value="0" min="0" max="3000" step="100" onchange="CalculateEstimate(); sliderChange(this.value);" /> <div class="range"></div> </div> <div id="result"></div> </form>hej
min far er en mand
<script> export default { name: "calculator", methods: { CalculateEstimate: function () { var b1 = parseInt(document.getElementById("churnRate").value); var b2 = parseInt(document.getElementById("invoulentaryChurn").value); var b3 = parseInt(document.getElementById("contributionMargin").value); var b4 = parseInt(document.getElementById("customerNumber").value); document.getElementById("result").innerHTML = (1 / (b1 / 100)) * b3 * (b4 * (b2 / 100)) * 12 * 0.5 + }, }, }; </script>1 answers
Answer question0
El atributo "onchange" en la etiqueta de entrada no puede acceder directamente a un método Vue. En lugar de onchange, use el controlador de eventos v-on:change para vincular sus entradas con sus métodos Vue. (Más información sobre los controladores de eventos aquí: https://v2.vuejs.org/v2/guide/events.html?redirect=true )
Esto es lo que podrías escribir:
<input type="text" min="0" max="100" id="churnRate" v-on:change="CalculateEstimate()" /> <input type="text" min="0" max="100" id="invoulentaryChurn" v-on:change="CalculateEstimate()" /> <input type="text" id="contributionMargin" v-on:change="CalculateEstimate()" /> Una versión abreviada de v-on:change es @change . Ambos funcionan igual.
También parece que su ecuación CalculateEstimate parece estar incompleta, solo para informarle;)