Vue.js and Moment.js：删除评论的条件

Question

我需要能够在满足两个条件时删除评论：

Id等于我们的id（我们只能删除我们的评论）。
距离创建评论不到 15 分钟。

我提出了第一个条件，但我正在努力做到并使用 Moment.js 添加第二个条件。每条评论都有一个created_at 属性。

<a v-if="comment.author.id == myProfile.id"
   v-on:click.stop="deletePostComment({ params: { post_id: getPost.id, comment_id: comment.id } })"
   class="g-color-gray-light-v1 g-color-gray-dark-v3--hover g-font-size-12 float-right u-link-v5 magic-absolute-position"
   style="cursor: pointer;">
                Delete
</a>

我想我们可以在一个函数中同时拥有这两个条件。请帮忙！

Answer 1

您可以通过从 created_at 日期减去当前日期来检查是否已过 15 分钟：

var now = new Date();
var created_at = new Date('2/9/2018 12:05')

然后将其与 15 分钟值进行比较。像下面这样的东西应该可以工作：

<a v-if="comment.author.id == myProfile.id && created_at - now >= 15*60*1000"
   v-on:click.stop="deletePostComment({ params: { post_id: getPost.id, comment_id: comment.id } })"
   class="g-color-gray-light-v1 g-color-gray-dark-v3--hover g-font-size-12 float-right u-link-v5 magic-absolute-position"
   style="cursor: pointer;">
                Delete
</a>

Answer 2

这个呢?:

<div v-if="isPastime('2018-02-07 11:40:00 +0000', 15, 'days')"></div>
<!-- In you case so do something like -->
<a v-if="comment.author.id === myProfile.id && isPastime(comment.created_at, 15, 'days')"></a>

方法：

methods: {
    isPastime: function (time, number, unit) {
        return moment(time).diff(moment(), unit) <= - number
    }
}

Answer 3

我决定添加带有函数 showDelete 的 v-if 指令，这将根据这两个条件显示或隐藏注释选项 "Delete"。

然后我把这个函数放在computed:

showDelete() {
  return moment().diff(moment(this.comment.created_at, 'YYYY-MM-DD HH:mm:ss Z'), 'minutes') <= 15 && this.comment.author.id === this.myProfile.id;
}

所以这个函数会监听布尔值。如果 true，那么它将显示选项 "Delete"。

Vue.js and Moment.js：删除评论的条件

Vue.js and Moment.js: Condition for deleting a comment

javascript

vue.js

conditional-statements

momentjs

directive