自定义指令

Question

documentation for custom directives 演示一起使用动态参数和值：

Directive arguments can be dynamic. For example, in v-mydirective:[argument]="value", the argument can be updated based on data properties in our component instance! This makes our custom directives flexible for use throughout our application.

如果 "value" 不包含 space，它工作正常。但是在值中添加 space（例如 v-mydirective:[argument]="some value"）会导致 Nuxt 窒息：

invalid expression: Unexpected identifier in

    some value

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

问题是什么，我该如何解决才能使用带有 space 的字符串作为自定义指令的值？

Answer 1

问题：

发生这种情况是因为当我们用空格传递 value 时，表达式由 vuejs 求值，它会尝试使用属性 some & [ 找到 data 选项=22=]。但是由于 none 与那些属性名称一起存在，因此我们得到了提到的错误。

一个简单的例子来解释这一点，当我们将 value 传递为：

v-mydirective:[argument]="2"

如果我们在 bind 函数中执行 console.log：

console.log(binding.value)

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

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

如果我们在 bind 函数中执行 console.log，有趣的是这次显示的输出是 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>

自定义指令

Custom directive

vue.js

nuxt.js

vue-directives

问题：

解决方案：