Question

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

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

用户可以使用导航跳转到任何问题。当用户点击导航链接时，我将“currentQuestion”对象更改为用户选择 - 对象在JS中通过引用传递，因此如果用户修改了某些内容，我的结果就是“中心”数组。没关系。

我还使用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"
>

我想这是你的身份

:name="currentQuestion.identifier"

当您不知道要呈现的确切内容（如请求或JSON文件中的属性）时，会使用 v-bind 。

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

1 个答案: