VueJS：自定义指令在 v-for 中不起作用答案

【问题标题】：VueJS: Custom Directive Doesn't Work Inside v-forVueJS：自定义指令在 v-for 中不起作用
【发布时间】：2018-12-20 21:35:10
【问题描述】：

问题

我有一个v-phone 指令来格式化表单输入的值。问题是它在 v-for 指令中不起作用。这可以补救吗？是否应该将其重构为组件？

代码

<template v-for="(user in record.users">
    <!-- ... -->
    <input v-model="user.phone" v-phone="user.phone" type="text" />
    <!-- ... -->
</template>

Vue.directive('phone', (el, binding, vnode) => {
    let characters = _.split(binding.value, '');
    let cleanCharacters = _.filter(characters, character => is.alphaNumeric(character));
    let cleanValue = _.join(cleanCharacters, '');
    let formattedValue = cleanValue.replace(/(\d{3})(\d{3})(\d{4})([a-z0-9])?/, '$1-$2-$3 $4');

    if (_.trim(binding.oldValue) === _.trim(formattedValue)) return;

    _.set(vnode.context, binding.expression, formattedValue);
});

环境

Vue 2.3.2

【问题讨论】：

我们如何在不查看指令代码的情况下知道问题？
@samayo 添加了指令代码。需要明确的是，该指令在 v-for 之外工作。
不要在模板上使用 v-for，如果你必须添加 :key 至少
这是有原因的，我在需要的地方有钥匙。

标签： vuejs2

【解决方案1】：

我有同样的问题（在“vue”中：“^2.5.2”），但用这个来解决它：

mounted(){
    this.$nextTick(function () {
     //to fix  v-for 
      let _this=this;
      setTimeout(function () {
        _this.$forceUpdate()
      },20)
    })

希望对你有帮助

【讨论】：