Vue.js 中未加载动态 JS 结果

Question

我在 Codepen 上用纯 JS 制作了一个报价计算器，对结果很满意。

现在，我正尝试在我的 Vue.js 项目中重用这个计算器 - 它运行良好。但出于某种原因，当我尝试使用计算器时，控制台出现此错误：

我怀疑是从纯 JS 到 Vue 的转换搞砸了，但是这里的任何人都可以启发我我忽略了什么吗？

提前致谢

 <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>

他

分钟远呃要求

<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>

Answer 1

输入标签中的“onchange”属性不能直接访问Vue方法。代替 onchange，使用 v-on:change 事件处理程序将您的输入与 Vue 方法绑定。（有关事件处理程序的更多信息：https://v2.vuejs.org/v2/guide/events.html?redirect=true）

您可以这样写：

<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()" />

v-on:change 的 shorthand 版本是 @change。两者的工作原理相同。

另外，您的 CalculateEstimate 方程似乎不完整，特此通知您 ;)

Vue.js 中未加载动态 JS 结果

Dynamic JS result doesn't load in Vue.js

javascript

innerhtml

vue.js