Использование get и set для объекта свойства данных - VueJS

The Bassman спросил: 07 октября 2018 в 12:16 в: javascript

Из того, что я знаю, у VueJS есть способ использовать метод получения и установки для их вычисляемых свойств в соответствии с этой документацией по вычисляемому свойству.

У меня здесь есть компонент vue, в котором вы можете видеть, что сумма является объектом. и у нас есть группа людей из магазина vuex.

data() {
  return {
    form: {
      amounts: {},
    },
  };
},
mounted() {
  const persons = this.$store.getters.getPersons()
  persons.forEach((person) => {
    this.$set(this.form.amounts, person.id, '0.00');
  });
},

Я сделал это, чтобы связать человека с суммой, которую он заплатил в форме, связав его, используя идентификатор и оплата. Это пример того, как this.form.amounts должен выглядеть.

{'HKYDUPOK': 0.00},
{'RYYJPUKA': 0.00},
{'KZMUYTAK': 0.00}

Теперь по умолчанию их значения должны быть 0,00 в поле ввода номера, в которое они вошли. сумма, по умолчанию я применил их к v-model, который выглядит следующим образом:

<div v-for="person in persons">
  <input
    class="form-control"
    v-model="form.amounts[person.id]"
    type="number"
    step=".01"
    min="0"
    required>
  </input>
</div>

Но здесь есть одна вещь, когда вы открываете свой фрагмент кода в браузере, вы заметили, что поле ввода имеет значение по умолчанию 0,00, которое действует как заполнитель. Я хотел удалить значение по умолчанию 0,00 на числовом вводе и вместо этого вместо пустого ввода, но базовым значением сумм на человека является не null, а 0,00 или 0. Это так, что Форма очищается от ввода, когда пользователь пытается ввести значения в поле ввода вместо того, чтобы стирать и заменять 0,00 на фактическое значение (надеюсь, это понятно). Теперь существует вероятность того, что на общую сумму, по крайней мере, 1 или более человек с суммой 0. Я хотел убедиться, что пустое поле ввода номера не приводит к нулю, но вместо этого это 0. Возможно ли это ?

Я попытался проверить получатель и установщик вычисляемого свойства, чтобы изменить привязку по умолчанию, но как вы сопоставляете form.amounts, чтобы сопоставить сумму с соответствующей персоной? В Get, если значение не превышает 0,00 или 0, вернуть пустое значение в поле ввода. Set - большая проблема, поскольку он принимает только один параметр, который называется newValue, и было бы сложно сказать, передайте personId для сопоставления сумм соответствующему лицу. , Есть ли способ затронуть и манипулировать связыванием свойства данных, которое является объектом, и в то же время изменить поведение модели по умолчанию, чтобы оно возвращало пустое значение вместо 0,00? Надеюсь, мой вопрос достаточно ясен.

0 ответов