将数据从自定义指令传递到组件

Question

我有一个从元素绑定中获取 URL 的指令，然后使用该 URL 执行 axios GET 请求。

我遍历返回的数据，然后我希望能够将返回的数据连同我对它的更改一起存储在组件 data() 对象 - 新闻中，但是我不确定这是否是possible/how可以实现

directives: {
    init: {
        mounted(el, binding) {
            el.id = binding.value
            Promise
            .all([axios.get(el.id)])
            .then((response) => {
                let data = response[0].data;
                for (var i in data) {
                    data[i].date = new Date(data[i].date);
                }
            });
        },
    }
},

我希望存储在里面的组件数据：

data() {
    return {
        news: '',
    }
},

和模板：

<div class="section news" ref=“myid” v-init:url="'https://www.myurl.com'" id="newsUrl">

Answer 1

这是我实现我想要的结果的方法，它似乎工作正常，但它不是我发布的问题的直接答案。但是它有效，因此如果有人遇到与我类似的问题，这可能是您可以解决的方法：

在 HTML 中分配一个 ref:

<div ref="myDiv" id="https://www.myurl.com">

在组件挂载方法上执行我的请求并将响应数据分配给我的组件数据对象(this.news):

mounted() {
        Promise
        .resolve(axios.get(this.$refs.myDiv.id))
        .then((response) => (
            this.news = response.data
        ))
    },

然后回到 HTML 我可以像这样遍历数据：

<div v-for="(item, index) in news" :key="index">
   <h2>{{item.title}}</h2>
   <p>{{item.description}}</p>
</div>

Answer 2

我同意该指令似乎是错误的处理方式。

但是，技术上可以通过 binding.instance 从指令访问 Vue 组件，因此您可以通过以下方式设置组件的 news 属性：

binding.instance.news = response.data

但是你不需要 Promise.all 因为只有一个 URL，所以只需要一个 Promise。您可以直接使用 axios.get()：

//Promise.all([axios.get(el.id)]).then(([response]) => {/*...*/})
axios.get(el.id).then(response => {/*...*/})

demo

将数据从自定义指令传递到组件

Passing data from custom directive to component

vue.js

vuejs3

vue-directives