首页 文章

如何从Vue.js 2中的自定义指令获取文字表达式？

提问于
浏览 次
2

我试图将Vue 1.x自定义指令转移到Vue 2.x，我无法在任何地方找到如何再次将表达式作为文字 . 假设这个例子是我的自定义指令：

<div v-custom="file.txt"></div>

在Vue1

Vue.directive('custom', function () {
  console.log(this.expression)
})

将“file.txt”作为字符串返回 .

在Vue2

Vue.directive('custom', {
  bind: function (el, binding) {
    console.log(binding.expression)
  }
})

将返回

[Vue warn]：属性或方法“文件”未在实例上定义，但在呈现期间引用 . 确保在数据选项中声明反应数据属性

和

[Vue警告]：渲染函数出错：“TypeError：无法读取未定义的属性'txt'”

这意味着我在Vue2中的表达式不再是字符串，而是变量 . 我如何让它现在返回一个字符串？

vue.js vuejs2

1 回答

  • 2

    只需将文本用单引号括起来，使其成为字符串文字 . 但是，如您的评论中所述，如果尝试访问 binding.expression ，它将包含包装单引号 . 相反，您应该使用 binding.value 属性 .

    Template:

    <div id="app">
  <div v-custom="'file.txt'"></div>
</div>

    Javascript:

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

new Vue({
    el: '#app'
})

    Sample Fiddle .

    回复于

相关问题