Question

例如，在第一个或第二个输入中更改数字后，结果为false。只有更改中的值才能得到正确的结果。

如果我在第一个输入中输入40，在第二个输入中输入3，而其他输入则保持不变，结果应为26。

请，你能帮我吗？

<body>
<div id="app">
<h1>{{title}}</h1>
    <form v-on:submit.prevent>
    <span>Довжина стіни, м:</span><br>
    <input class="length" type="text" name="length" v-model.text.trim="wall_length"><br>
    <span>Висота стіни, м:</span><br>
    <input class="heigth" type="text" name="heigth" v-model.text.trim="wall_height"><br>
    <hr>
    <span>Ширина рулона, м:</span><br>
    <select v-model="selected">
        <option  v-for="key in weight" :value="key">{{key}}</option>
    </select><br>
    <span>Довжина рулона, м:</span><br>
    <input class="length_roll" type="text" name="length_roll" v-model.text.trim="length" maxlength="5"><br>
    <span>Повтор малюнка (рапорт), см:</span><br>
    <input class="rapport" type="text" name="rapport" v-model.text.trim="rapport"><br><br>
        <input type="submit" value="Порахувати" v-on:click="calc">
    </form>
    <span>{{result}} рулонів шпалер</span>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script>
    new Vue({
        el : "#app",
        data: {
            title: "Калькулятор шпалер",
            wall_length: 20,
            wall_height: 2.75,
            weight: [0.53, 1.05],
            rapport: 0,
            length: 10.05,
            selected: 0.53,
            polotno_for_room: 0,
            polotno_rulon: 0,
            result: 0
        },
        methods: {
            calc: function () {
        this.polotno_for_room = (this.wall_length + this.wall_height)/ this.selected;
        this.polotno_rulon = this.length /(this.wall_height + 0.10);
        this.result = Math.ceil(this.polotno_for_room/this.polotno_rulon);
        console.log((this.wall_length + this.wall_height)/ this.selected);
        console.log(this.polotno_rulon = this.length /(this.wall_height + 0.10));
        console.log(Math.ceil(this.polotno_for_room/this.polotno_rulon));

    }
        }

        });


</script>
</body>

Answer 1

您的主要问题是您正在使用带有type="text"的输入。结果是一个字符串。启动应用程序时，组件的状态会初始化为您设置为数据的状态，从而使wall_length和wall_height成为数字。更改输入之一后，这些变量的类型将更改为“字符串”。

由于javascript的工作原理，它现在将进行字符串连接，而不是添加两个数字。然后它将转换回数字以除以this.selected是什么。结果是，不是将40 + 3 = 43除以this.selected，而是将“ 40” + 3 = 403除以this.selected。请注意，我在输入后面添加了typeof支票以展示这一点。

new Vue({
  el: "#app",
  data: {
    title: "Калькулятор шпалер",
    wall_length: 40,
    wall_height: 3,
    weight: [0.53, 1.05],
    rapport: 0,
    length: 10.05,
    selected: 0.53,
    polotno_for_room: 0,
    polotno_rulon: 0,
    result: 0
  },
  methods: {
    calc: function() {
      this.polotno_for_room = (this.wall_length + this.wall_height) / this.selected;
      this.polotno_rulon = this.length / (this.wall_height + 0.10);
      this.result = Math.ceil(this.polotno_for_room / this.polotno_rulon);
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>{{title}}</h1>
  <form v-on:submit.prevent>
    <span>Довжина стіни, м:</span><br>
    <input class="length" type="text" name="length" v-model.text.trim="wall_length"> {{ typeof wall_length }}<br>
    <span>Висота стіни, м:</span><br>
    <input class="heigth" type="text" name="heigth" v-model.text.trim="wall_height"> {{ typeof wall_height }}<br>
    <hr>
    <span>Ширина рулона, м:</span><br>
    <select v-model="selected">
      <option v-for="key in weight" :value="key">{{key}}</option>
    </select><br>
    <span>Довжина рулона, м:</span><br>
    <input class="length_roll" type="text" name="length_roll" v-model.text.trim="length" maxlength="5"><br>
    <span>Повтор малюнка (рапорт), см:</span><br>
    <input class="rapport" type="text" name="rapport" v-model.text.trim="rapport"><br><br>
    <input type="submit" value="Порахувати" v-on:click="calc">
  </form>
  <span>{{result}} рулонів шпалер</span>

</div>

您的一种选择是自由使用parseFloat(..)。它将确保您在计算中仅使用数字。

new Vue({
  el: "#app",
  data: {
    title: "Калькулятор шпалер",
    wall_length: 40,
    wall_height: 3,
    weight: [0.53, 1.05],
    rapport: 0,
    length: 10.05,
    selected: 0.53,
    polotno_for_room: 0,
    polotno_rulon: 0,
    result: 0
  },
  methods: {
    calc: function() {
      this.polotno_for_room = (parseFloat(this.wall_length) + parseFloat(this.wall_height)) / parseFloat(this.selected);
      this.polotno_rulon = parseFloat(this.length) / (parseFloat(this.wall_height) + 0.10);
      this.result = Math.ceil(parseFloat(this.polotno_for_room) / parseFloat(this.polotno_rulon));
    }
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>{{title}}</h1>
  <form v-on:submit.prevent>
    <span>Довжина стіни, м:</span><br>
    <input class="length" type="text" name="length" v-model.text.trim="wall_length"><br>
    <span>Висота стіни, м:</span><br>
    <input class="heigth" type="text" name="heigth" v-model.text.trim="wall_height"><br>
    <hr>
    <span>Ширина рулона, м:</span><br>
    <select v-model="selected">
      <option v-for="key in weight" :value="key">{{key}}</option>
    </select><br>
    <span>Довжина рулона, м:</span><br>
    <input class="length_roll" type="text" name="length_roll" v-model.text.trim="length" maxlength="5"><br>
    <span>Повтор малюнка (рапорт), см:</span><br>
    <input class="rapport" type="text" name="rapport" v-model.text.trim="rapport"><br><br>
    <input type="submit" value="Порахувати" v-on:click="calc">
  </form>
  <span>{{result}} рулонів шпалер</span>

</div>

为什么我的vuejs壁纸计算器不起作用？

1 个答案: