【发布时间】：2021-07-22 10:51:43
【问题描述】：
在我的 html 中，我引用了指令：v-init:url="myurlhere"
data() {
return {
currentPage: 1,
url: '',
news: '',
}
},
directives: {
init: {
mounted(el, binding) {
console.log(binding.value);
this.iterateUrlContents(binding.value)
},
}
},
methods: {
iterateUrlContents(url) {
console.log('url: ' + url);
console.log(binding.value) 显示了预期的结果，但是当我调用 iterateUrlContents 时，我得到以下信息：
指令钩子执行期间未处理的错误
未捕获的类型错误：无法读取属性“iterateUrlContents” 未定义
我还发现，如果我尝试this.url = binding.value，我会得到
未捕获的类型错误：无法设置未定义的属性“url”
为什么 binding.value 未定义，如何将这些信息传递给我的方法？
【问题讨论】：
-
您正在尝试访问不在指令范围内的函数。该指令无权访问函数 iterateUrlContens（它是组件的一部分，而不是指令）。您可以在组件范围之外创建一个函数 并使用它。喜欢
const iterateUrl = () => {} // your function export default { name: 'MyComponent', directive: { mounted() { iterateUrl(url) } } } -
顺便说一句，我应该提到，以这种方式使用它比使用指令中的组件实例更可取，特别是如果您不能保证该指令仅用于组件而不是基本 DOM 元素。组合 API 将鼓励您创建纯函数，您可以在任何需要的地方轻松导入。
-
谢谢@Braks 我有这个工作。是的，我的下一步是现在将该值放入组件方法中。