自定义指令

debugcn 发表于 Dev

周杰伦欢迎

自定义指令的文档演示了如何同时使用动态参数和值：

指令参数可以是动态的。例如，在中v-mydirective:[argument]="value"，可以根据组件实例中的数据属性来更新参数！这使我们的自定义指令可以灵活地在整个应用程序中使用。

如果"value"不包含空格，则可以正常工作。但是，在值（例如v-mydirective:[argument]="some value"）上添加空格会导致Nuxt阻塞：

invalid expression: Unexpected identifier in

    some value

  Raw expression: v-mydirective:[argument]="some value"

这是什么问题，如何解决它，以便可以将带空格的字符串用作自定义指令的值？

宫殿

问题：

发生这种情况的原因是，当我们传递value空格时，该表达式由vuejs求值，并且它尝试查找data具有属性some＆的选项value。但是由于这些属性名称不存在，因此我们得到了上述错误。

一个简单的例子说明了这一点，当我们通过时value：

v-mydirective:[argument]="2"

如果我们执行console.log内部bind函数：

console.log(binding.value)

您将看到显示为的输出2。但是，如果我们通过value：

v-mydirective:[argument]="2 + 2"

如果我们做的console.log内部bind功能，有趣的是，输出显示这个时间是4不是2 + 2

解决方案：

有两种可能的解决方案：

解决方案1：

您可以简单地用some value单引号引起来并将其作为字符串传递，例如：

v-mydirective:[argument]="'some value'"

这样，表达式将直接被评估为字符串。

演示：

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    console.log(binding.value)
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left',
    }
  }
})

#dynamicexample {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  color: #304455;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="dynamicexample">
  <p v-pin:[direction]="'some value'">I am pinned onto the page at 200px to the left.</p>
</div>

解决方案2：

您还可以为其创建单独的data选项，例如：

data: function () {
  return {
    myValue: 'some value'
  }
}

然后可以在指令中使用它，例如：

v-mydirective:[argument]="myValue"

演示：

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    console.log(binding.value)
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left',
      myValue: 'some value'
    }
  }
})

#dynamicexample {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  color: #304455;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="dynamicexample">
  <p v-pin:[direction]="myValue">I am pinned onto the page at 200px to the left.</p>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。