Question

上下文：我创建了一个小社交网络来发现vue.js. 在时间线页面上，我有帖子和评论（问题是评论）

实际上，我显示所有评论，现在我想用按钮 Hidecomments 来显示最后两个评论并隐藏所有其他评论。

我想使用CSS类来隐藏它们。

我无法在＆＃39;输入范围内执行某项功能＆＃39;我在文档中找不到关于这一点的任何信息。

代码：

第一点：我有一个API向我发送信息。

＆＃13;

module.exports = {
  data: function() {
    return {
      timeline: []
    }
  },
  methods: {
    displayMoreComments: function() {

    }
  },

  mounted() {
    let self = this;
    fetch(test.ajax_url + '/get_timeline', {
        method: 'POST',
        credentials: 'include',
        headers: {
          'dataType': 'json',
          'type': 'post'
        }
      })
      .then(function(data) {
        self.timeline = data;
      });
  },
}

＆＃13;

<div v-for="entry in timeline.entries">
  <div :key="entry.id">
    <p>{{ entry.content }}</p>
    <button v:on:click="HideComments()"></button>
    <div v-for="comments in entry.comments">
      <p>{{ comments.content}}</p>
    </div>
  </div>
</div>

＆＃13;

问题：当我点击按钮 hideComments 并仅显示两个持续评论时，修改评论的最佳方法是什么。

Answer 1

我没试过，但这应该有效。

在您的vue数据中添加变量以管理评论可见性。

data: function() {
    return {
        noComments: false;
    }
},

然后将按钮设置为切换可见性

<button v:on:click="noComments = !noComments"></button>

最后，使用v-if检查新变量的值。如果隐藏了注释，只需检查当前注释是否是最后一个

之一

<div v-if="!noComments || entry.comments.length == index + 1 || entry.comments.length == index" 
     v-for="(comments,index) in entry.comments">
    <p>{{ comments.content}}</p>
</div>

重要提示：请记住在v-for

中添加索引

如何在v-for

1 个答案: