динамически отображать и скрывать кнопку в соответствии с вычисленным свойством в vuejs - PullRequest
Новая
       93

динамически отображать и скрывать кнопку в соответствии с вычисленным свойством в vuejs

0 голосов
/ 03 августа 2020
• 1000 все еще виден для всех комментариев, т.е. (также для других пользователей). Предположим, я пользователь, я комментирую 3 раза, тогда кнопка удаления должна отображаться только в моих комментариях, а не в комментариях других. может кто-нибудь, пожалуйста, помогите мне достичь этого? 
My code snippet is below

<div class="comment-list" v-for="comment in comments" :key="comment._id"> 
   <div class="paragraph" :class="[name, onCaretButtonClick ? 'paragraph' : 'hide']">
    <span class="names" id="comment-desc"> 
      <label class="comm-name">{{ comment.name }}</label>
      <button class="like-btn" id="like-comment"><i class="fas fa-heart"></i></button>
      <label> {{ comment.likes + ' likes' }} </label>
        <button v-bind:disabled="isCommentIdMatched" v-on:click="deleteComment(comment.userId)" 
         class="del-btn">delete</button>
    </span>
    <p>{{ comment.comment }}</p>
  </div>
</div>

ниже - функция deleteComment и вычисляемые свойства, которые я использую 

computed: {
comments() {
  return store.state.comments 
},
getUserId() {
  return store.state.user._id
},
isCommentIdMatched() {
  let comments = store.state.comments
  let value = false
  if(comments) {
    comments.forEach((comment) => {
      if(comment.userId.match(this.getUserId)) {
        value = true
      }
    })
    return value
  }
  else {
    return value
  }
}

}, 

 methods: {
   deleteComment: function(commentUserId) {
   let userId = store.state.user._id
   if(commentUserId.match(userId)) {
    console.log('yes matched')
   }
 },

}

1 Ответ

0 голосов
/ 03 августа 2020

нет необходимости писать свойство isCommentIdMatched, вместо этого вы можете использовать изменение некоторых строк.

добавить v-bind = "comments" в строке ниже 

<div v-bind="comments" class="comment-list" v-for="comment in comments" :key="comment._id">

и добавить v- if = "comment.userId && comment.userId.match (getUserId)" в кнопке ниже 

<button v-if="comment.userId && comment.userId.match(getUserId)" v-on:click="deleteComment(comment.userId)" class="del-btn">delete</button>
...