Vue вычисляемых свойств, проблемы с сложением и конкатенацией - PullRequest
Новая
       69

Vue вычисляемых свойств, проблемы с сложением и конкатенацией

1 голос
/ 18 июня 2020

Просто изучал Vue, и я наткнулся на интересное поведение, я хотел бы знать, почему это происходит и как этого избежать. 

<template>
  <div>
    <input type="number" v-model="a" style="color: white" />
    <input type="number" v-model="b" style="color: white" />
    <p style="color: white">{{ c }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
      b: 2
    };
  },
  computed: {
    c: function() {
      return this.a + this.b;
    }
  }
};
</script>

При первом рендеринге 'c' равно отображается как «3», чего я и ожидал. Однако, если я изменю один из входов, два числа соединятся. Например, если я изменил «а» на «11», мое ожидаемое значение будет 13, но я получаю «112». Почему это происходит?

1 Ответ

3 голосов
/ 18 июня 2020

Просто используйте Number конструктор объекта, чтобы вычислить сумму: 

  computed: {
    c: function() {
      return Number(this.a) + Number(this.b);
    }
  }

два операнда рассматриваются как строки, которые будут объединены, когда вы попытаетесь поместить + между ними, по порядку чтобы избежать этого поведения по умолчанию, попробуйте использовать конструктор Number или функцию parseInt, parseFloat, чтобы изменить поведение на операцию суммирования.

или попробуйте использовать модификатор number в директиве v-model, например: 

<input type="number" v-model.number="b" style="color: white" />
...