Я использую фреймворк Vue

Это HTML код

<input  name="quantity" type="number" v-model="product.price" placeholder="price" >

Сценарий

product: {
        name:String,
        price: null,
      },
addProduct() {
      this.$firestore.Products.add(this.product);
    },

документ пожарного депо

Я хочу сохранить цену как число.

1
vimal rajan 15 Ноя 2020 в 22:50

3 ответа

Лучший ответ

Используйте модификатор v-model.number.

<input  name="quantity" type="number" v-model.number="product.price" placeholder="price" >
1
Beyers 15 Ноя 2020 в 19:57

Когда вы вводите данные в поле ввода текста в HTML, их значение становится строкой в ​​коде JS. Вам нужно явно преобразовать фактическое значение в число. Несмотря на то, что вы устанавливаете ввод type="number", он определяет только то, что пользователи мобильных устройств с клавиатурой видят при вводе значения. Это все еще строка, если доступ через JS

Один из способов сделать это:

const price = Number(price);

Документация для Number

Другой метод - разобрать его

parseFloat(price)

Изменить: метод @Beyers кажется лучшей реализацией для Vue.

0
Halmon 15 Ноя 2020 в 19:55

Когда вы записываете значение формы в javascript, по умолчанию это строка. даже если вы введете число в текстовое поле формы.

product: {
    name:String,
    price: null,
},

.......

addProduct() {
    data_firestore = {...this.product};
    data_firestore.price = parseFloat(data_firestore.price)
    this.$firestore.Products.add(data_firestore);
},

Я использую оператор распространения, потому что мне неизвестно, используете ли вы метод watch объекта product или нет. так что копирование, а затем изменение кажется мне более безопасным. вы также можете выполнить прямое преобразование parseFloat () для фактического объекта.

0
subhadip pahari 15 Ноя 2020 в 20:07