Vue公司 - 返回无极V-for循环

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()生命周期挂钩执行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);
    }

});

Answer 2

在显示侧一切都应该是反应性的。你不应该调用一个方法，任何方法，在V-如果一个模板。你不知道/当模板被渲染不应该关心。

尝试定义data牵你的作者信息，然后从创建挂钩调用getAuthor()。