Vue - директивное связывание не работает при обновлении элемента - PullRequest
Новая
       34

Vue - директивное связывание не работает при обновлении элемента

0 голосов
/ 05 июня 2018

Я использую vue.js для генерации форм - все поля в массиве объектов javascript имеют следующую структуру: 

{
    type: "input",
    mask: "date",
    default: "2018/04/14"
},
{
    type: "input",
    mask: "currency",
    default: "0"
}

Пользователь может перейти к любому вопросу, используя навигацию.Когда пользователь щелкает навигационную ссылку, я меняю свой объект «currentQuestion» на выбранный пользователем - объект передается по ссылке в JS, поэтому, если пользователь что-то изменяет, у меня появляются результаты в моем «центральном» массиве.И это нормально.

Я также использую маску ввода для маскировки полей ввода с очень простой директивой: 

import Vue from 'vue'
import Inputmask from 'inputmask'

Vue.directive('mask', {
  bind (el, binding) {
    if (binding.value) {
      Inputmask(binding.value).mask(el)
    }
  }
})

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

После отладки я знаю, что элемент обновлен, но vue не привязывает правильные данные (из currentQuestion) к входу: 

methods: {
  getInputMask () {
    return this.currentQuestion.mask || null
  },

и использование: 

<input type="text"
    :name="currentQuestion.identifier"
    v-mask="getInputMask()"
    v-model="currentQuestion.value"
    @keyup="afterModifyInput"
>

В результате я не знаю, как можно решить эту проблему

1 Ответ

0 голосов
/ 05 июня 2018

Вам нужно установить id для каждого элемента и использовать v-bind: key примерно так: 

<input type="text"
    v-bind:key="YOUR_ELEMENT.id"
    v-mask="getInputMask()"
    v-model="currentQuestion.value"
    @keyup="afterModifyInput"
>

Полагаю, это ваш идентификатор

:name="currentQuestion.identifier"

Ну, v-bind используется, когда вы не знаете точный контент, который вы собираетесь визуализировать как свойства из запроса или файла JSON.

...