Question

我正在使用Vue（刚刚开始学习它）和Bootstrap来创建博客，我希望当用户单击评论按钮时弹出一个模式窗口（显示帖子的名称/等）。但是，现在模式窗口仅从最新博客文章中获取文章信息。这意味着即使您单击第一条帖子，您也将获得ID信息和最新帖子的标题。...有什么建议或解决方案吗？预先感谢！

看来，我的代码的主要问题是，如果您有n条帖子，它将在n中生成n个模态。我已经尝试过广告位，但是模式开始显示第一条而不是最后一条。我想知道是否同时显示了所有模态，但是我只显示了最后一个模...我应该改用索引吗？

是否有任何方法只能使一个模态得到并显示被点击帖子的信息？

这是我的帖子组件代码

Vue.component('posts', {
    props: ['post', 'loggedUser'],
    template: `
        <div class='blog-post py-2'>
            <h3> {{post.title}} </h3>
            <h6> Posted by {{post.postedBy}} on {{formatCompat(post.createdAt)}} </h6>
            <span class='comments'>
            <i class='far fa-comment-dots ml-3' data-toggle="modal" data-target="#commentModal"></i>
            {{post.comments.length}}
            </span>
        </div>
    `

我的模态组件：（主要来自引导文档）

Vue.component('modal', {
    props: ['post'],
    template: `
    <div>
        <div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
            <h5 class="modal-title" id="commentModalLabel">Comment on {{post.postedBy}}'s post! ({{post.title}})</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
            ...
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        </div>
        </div>
    </div>
    `
})

在这里，我希望{{posted.title}}和其他信息能够反映单击评论按钮的帖子，但它显示的是最新帖子。

父元素：

const postComponent = new Vue({
    el: '#posts',

    data: {
        posts: null
    },

    methods: { // mostly code unrelated to modal stuff

    }

我的哈巴狗文件：

 #posts
     if user                        
     posts(name=username, v-for='post in posts' v-bind:post='post' v-bind:key="post.id" v-on:like-post='like' logged-user=loggedUser v-on:comment-post='comment')
     modal(v-for='post in posts' v-bind:post='post' v-bind:key="post.id")

Answer 1

您需要添加一个自定义data属性，以反映所选帖子，以供模板阅读。

data: {
 ...
   selected: '',
 ...
}

然后，您需要一种将selected属性分配给单击的帖子的方法。

methods: {
    changeTitle(postId) {
      const currentPost = posts.filter((post) => {
         return post.id == postId;
      });
    this.selected = currentPost.id;
   }
}

因此，既然您拥有一个数据属性来表示当前选定的标题，并具有一种通过单击来更改该属性的方法，则需要将该方法的指令分配给该帖子。因此，将其添加到您要触发该方法的html标签中：

@click = "changeTitle(postId);"

这将触发该方法以及来自调用该方法的帖子中的帖子ID。现在，可以在模板中可以访问数据的任何位置显示当前标题，如下所示：

{{selected}}

Vue的v-for不会在模式窗口中显示正确的文本（仅显示第一项的数据）

1 个答案: