javascript - Vue - 在 v-for 循环中返回 Promise

Question

我在使用 Vue JS 时遇到问题。我正在循环访问 WordPress Rest API 中的一些“帖子”，并且必须在 v-for 循环中为每个帖子打印帖子的作者。分配给帖子的作者只是一个 ID，因此我必须对 API 进行新的调用，以根据返回的 ID 获取作者姓名。

我遇到的问题是，当我调用获取作者姓名的函数时，它会在分配给帖子对象中的帖子的所有用户之间不断地来回切换。

Vue.component('blog-posts', {
    props: {
        posts: {},
    },

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

    template: `
        <section class="entry" v-if="posts.length">
            <div class="entry-content">
                <article v-for="(post, index) in posts" :key="post.index">
                    <h1><a :href="post.link">{{ post.title.rendered }}</a></h1>
                    <p v-html="post.content.rendered"></p>

                    // THIS IS THE PROBLEM
                    <p v-if="getAuthor(post.author)">{{ userName }}</p>

                    <button type="submit" @click="deletePost(post)">Slet indlæg</button>
                </article>
            </div>
        </section>
    `,

    created() {
        // Of course it works if i put a constant user id in, but i need to parse in inside the loop.
        // this.getAuthor(2);
    },

    computed: {

    },

    methods: {
        deletePost: function(post) {
            let path = new wp.api.collections.Posts({
                id: post.id
            });

            Event.$emit('delete-post', path, post.id);
        },


        getAuthor(author) {
            let vm = this;

            let user = new wp.api.models.User({
                id: author,
            });

            return user.fetch().then(response => {
                vm.userName = response.name;
                // return true;
            });
        },

        // showAuthor(author) {
        //  let user = new wp.api.models.User({
        //      id: author
        //  });

        //  user.fetch().then(response => {
        //      this.userName = response.name;
        //      // return true;
        //  });
        // },
    },

});



const app = new Vue({
    el: '#app',
    data: {
        wp: wp.api,
        message: 'Hello Vue',
        posts: [],
    },

    mounted() {
        let posts = new wp.api.collections.Posts();
        let response = posts.fetch().then(response => {
            this.posts = response;
        });

        Event.$on('post-added', (item) => {
            this.posts.unshift(item.attributes);
        });

        // Delete post
        Event.$on('delete-post', (item, id) => {
            this.posts.forEach((post, index) => {
                if ( post.id === id ) {
                    this.posts.splice(index, 1);
                    item.at(0).destroy();
                }
            });
        });
    },
});

我不完全确定这是返回函数调用值的最佳方式。

Answer 1

你的问题是你的blog-posts组件包含多篇博客文章，但它们都共享一个对 username 的引用。 。由于博客文章可能由不同的人撰写，您当然会覆盖 username当您迭代各个帖子时多次。

最好的解决方案实际上是将单个博客文章抽象为它自己的原子组件，例如您的 <blog-posts>组件只是多个 <blog-post> 的容器:示意性地应该是这样的:

└─ <blog-posts>
    ├─ <blog-post>
    ├─ <blog-post>
    ├─ <blog-post>
    ├─ <blog-post>
    └─ <blog-post>

您可以使用:post="post"这样您就可以通过整个post数据到你的原子组件中:

// The `<blog-posts>` component is only a COLLECTION of `<blog-post>`
// So it is a "dumb" component in a sense
Vue.component('blog-posts', {
    props: {
        posts: {},
    },
    template: `
        <section class="entry" v-if="posts.length">
            <div class="entry-content">
                <blog-post v-for="(post, index) in posts" :key="post.index" :post="post" />
            </div>
        </section>
    `
});

所有与帖子相关的逻辑都应从 <blog-posts> 中删除集合组件并被移入原子 <blog-post>组件代替。然后，在您的新 <blog-post> 中组件，您可以:

• 处理单个帖子的所有模板需求
• 处理个别帖子操作，例如删除帖子
• 最重要的是:使用 mounted()生命周期 Hook 执行 API 调用以获取与该个人帖子相关的用户名

所以，你的原子组件代码看起来有点像这样:

// The `<blog-post>` component is atomic
// It contains all the information related to a SINGLE post
Vue.component('blog-post', {
    props: {
        post: {},
    },

    data() {
        // Each individual blog post stores its own username
        return {
            userName: '';
        }
    },

    template: `
        <article>
            <h1><a :href="post.link">{{ post.title.rendered }}</a></h1>
            <p v-html="post.content.rendered"></p>

            <p>{{ userName }}</p>

            <button type="submit" @click="deletePost(post)">Slet indlæg</button>
        </article>
    `,

    methods: {
        deletePost: function(post) {
            let path = new wp.api.collections.Posts({
                id: post.id
            });

            Event.$emit('delete-post', path, post.id);
        }
    },

    mounted: function() {
        // Fetch post author metadata when the `<blog-post>` component is mounted
        let user = new wp.api.models.User({
            id: author,
        });

        user.fetch().then(responsve => this.userName = response.name);
    }

});