Vue - 指令绑定不适用于元素刷新

Question

我使用 vue.js 生成表单 - 所有字段都在 javascript 对象数组中，结构如下：

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

用户可以使用导航跳转到任何问题。当用户单击导航 link 时，我将我的 "currentQuestion" 对象更改为由用户选择 - 对象在 JS 中通过引用传递，因此如果用户修改某些内容，我的 "central" 数组中会有结果。没关系。

我还使用 inputmask 通过非常简单的指令来屏蔽输入字段：

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"
>

结果，我不知道如何解决这个问题

Answer 1

你需要为每个元素设置一个 id 并使用 v-bind:key 像这样:

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

我想这是你的 ID

:name="currentQuestion.identifier"

好吧，v-bind 用于当您不知道要呈现的确切内容（如来自请求或 JSON 文件的属性）时。

Vue - 指令绑定不适用于元素刷新

Vue - directive bind doesn't work on element refresh

javascript

vue.js

binding

directive

input-mask