Динамическое создание входных данных И переменных данных И одновременное применение маскировки

#vuejs2

Вопрос:

Я новичок в кодировании в целом, извините, если это плохо объяснено. У меня есть система продажи билетов на пиццу, в которой есть компонент под названием «Новый продукт». Этот компонент отвечает за то, чтобы пользователь мог отправлять различные виды пиццы, которые он хочет продавать в своем магазине.

Чтобы узнать цену на указанную пиццу, пользователь может отправить «варианты», которые включают размер, заполнение границы и т.д.

Компонент NewProduct уже получает все варианты, которые пользователь зарегистрировал в своей программе. Идея состоит в том, чтобы динамически создавать новый ввод «Значения» на основе того, сколько вариантов он зарегистрировал в категории «пицца».

Объект NewProduct имеет массив, который начинается пустым, и когда данные вводятся в динамически создаваемый ввод значения, эти данные добавляются в массив NewProduct.value, например:

 <div v-for="variacao in variacoes" :key="variacao.id">
    <div class="col-md-12 mb-3" v-if="variacao.tipo == 'pizzas'">
        <label for="valor">Valor {{ variacao.nome }} </label>
        <input class="form-control" type="text" name="valor" id="valor" placeholder="Valor" required :ref="'valor_' variacao.ordem" v-model="novoProduto.valor[(variacao.ordem)-1]" @keydown="teste($event)">
    </div>
</div>
 

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

Вот как работал мой предыдущий:

 computed: {
value: {
  // Assuming you are in the same country as toLocalString(), this should work:
  get: function () {
    return (this.val/100).toLocaleString().padStart(4, "0.00")
  },
  // setter
  set: function (newValue) {
    // This is a cheeky regex, that can remove any non-digit character:
    newValue = parseInt(newValue.replace(/D /g, ''));
    // Handle edge cases
    if(isNaN(newValue)){
      newValue = 0; 
    }
    this.val = newValue;
  }
}
 

Проблема в том, что, поскольку все это должно создаваться динамически, я не могу выбрать начальный this.val, который раньше использовался. Есть ли решение этой проблемы?

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

Любые советы, рекомендации или даже исправления приветствуются, я здесь немного не в своей тарелке. Спасибо!