Вычисляемые свойства Vue, проблемы с сложением и объединением

Просто изучая 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». Почему так происходит?


javascript vue.js computed-properties vuejs2 vue-component
person MapleDanish    schedule 18.06.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Просто используйте конструктор объекта 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" />
person Boussadjra Brahim    schedule 18.06.2020
comment
Это работает. Но я не совсем понимаю, зачем это нужно. Может, станет понятнее по мере работы над документацией. Изменить - что меня действительно смущает, так это то, почему он сначала отображает 3, а не 12, а затем переключается на конкатенацию при вводе ... - person MapleDanish; 18.06.2020
comment
я думаю, что модификатор number - лучшее решение, так как мы работаем с vue - person Boussadjra Brahim; 18.06.2020
comment
В этом есть смысл. Вы знаете, почему Vue изначально вычисляет 3 вместо 12? Возможно, это не имеет значения, поскольку вы предоставили несколько обходных путей, но на данный момент у меня нет конкретного варианта использования, я просто пытаюсь изучить фреймворк. - person MapleDanish; 18.06.2020
comment
данные изначально объявлены и представлены как числа 1, но при вводе данные будут обновлены как строки '1' - person Boussadjra Brahim; 18.06.2020
comment
Да! Только что нашел его в документации ... v-model будет игнорировать начальное значение, проверенные или выбранные атрибуты, найденные в любых элементах формы. Он всегда будет рассматривать данные экземпляра Vue как источник истины. Вы должны объявить начальное значение на стороне JavaScript внутри параметра данных вашего компонента. Следовательно ... начальные данные - это число, поле ввода интерпретируется как строка, даже если оно установлено на тип = число. Очевидно, что Vue на это не смотрит, поэтому ваш v-model.number будет наиболее правильным подходом к этому. Чувствует себя хорошо, изучая новые вещи, лол. - person MapleDanish; 18.06.2020