Как по условию скрывать блоки v-show?

Question

[geometria]

Здесь два взаимозаменяемых блока, которые скрываются/отображаются при проверке поступающих данных из axios

<!-- если в БД нет отзыва админа -->
     <div v-show="feed_isVisible">
       ...
    </div>

<!-- если в БД есть отзыв от админа -->
 <div v-if="comment.user === 'admin' " 
      feed_isVisible=false, 
      v-for="comment in comments">
           <div id="message">{{ comment.message }}</div>
      <button @click="feed_isVisible=!feed_isVisible">
           Редактировать
      </button>
 </div>

В этом примере кнопка "Редактировать" скрывает верхний блок, но строчка feed_isVisible=false не работает.

Как скрыть верхний, по умолчанию видимый блок, по условию comment.user === 'admin',
т.е. скрыть если в базе данных в поле user присутствует admin?

Answer 1

[0xD34F]

Во-первых.

Во-вторых.

После того, как сделаете вычисляемое свойство, просто смотрите длину получившегося массива:

<div v-show="!adminComments.length">

Comments

[geometria]

Спасибо

[geometria]

Только теперь одна кнопка работает и скрывает блок, а другая те же самые функции игнорирует.

<div v-for="comment in adminComment"
      :key="comment.id"
      v-show="feed_isVisible">
             <div id="user">{{ comment.user }}</div>
        <!-- эта кнопка работает-->
      <button @click="feed_isVisible=!feed_isVisible, 
                      adminComment.length=!adminComment.length">
        Редактировать
      </button>
      
</div>

     <div v-show="!adminComment.length">
         <textarea v-model="text">
         </textarea>
             <!-- а эта кнопка не работает-->
            <button @click="feed_isVisible=!feed_isVisible, 
                            adminComment.length=!adminComment.length">
              Отправить
            </button>
      </div>

Как сделать, чтобы кнопка Отправить скрывала div v-show="!adminComment.length" и отображала div v-show="feed_isVisible" ? Без изменения имени блоков, т.к. они выполняют свои функции корректно.

[0xD34F]

geometria,

adminComment.length=!adminComment.length

Вот, значит, как. На всякий случай уточню: adminComment - это массив, да?

[geometria]

Вы извините. Я запуталась. Подскажите, как правильно?

[0xD34F]

geometria, я что-то непонятное спросил?

[geometria]

Да, наверное массив, я получаю его таким образом:

computed: {
 adminComment: function () {
    return this.comments.filter(function (comment) {
      return (comment.user === 'admin')
    })
  }

[0xD34F]

geometria,

наверное массив

"Наверное". Да уж, круто. Вам сюда - ни хрена же не знаете.

Подскажите, как правильно?

Правильно ЧТО? Насколько я понял, у вас есть какой-то список. Иногда он должен показываться, иногда нет. Есть блок с текстовым полем, который тоже иногда должен быть виден, а иногда нет. Есть какие-то кнопки, нажатия на которые должны переключать видимость списка и текстового поля. Рассказывайте подробнее.

[geometria]

adminComment возвращает массив:

[ { "id": 115, "post_id": 1, "user": "admin", "message": "Некий  текст", "date": "2020-03-15 19:10:26" } ]

adminComment.length возвращает 1 (в первом блоке) или 0 (во втором блоке)
первый блок:

<!-- если в БД есть отзыв админа -->
 <div v-for="comment in adminComment"
      :key="comment.id"
      v-show="feed_isVisible">
          <div id="user">{{ comment.user }}</div>
<!-- кнопка скрывает текущий блок и открывает второй блок -->
          <button @click="feed_isVisible=!feed_isVisible, 
                      adminComment.length=!adminComment.length, 
                      update(comment.message);">
        Редактировать
      </button>
</div>

второй блок:

<!-- если в БД нет отзыва пользователя, показываем форму отправки отзыва -->
     <div v-show="!adminComment.length">
         <textarea v-model="text" 
           style="resize:none; width:80%">
         </textarea>
     <!-- эта кнопка не скрывает текущий блок, не отображает первый, но функцию Text выполняет -->
           <button @click = "feed_isVisible=!feed_isVisible, 
                             adminComment.length=!adminComment.length, 
                             Text(text);"
                             style="float:right;">

                Отправить
            </button>     
     </div>

данные получаю так:

getComments() {
       let vm = this
       axios.get('/api/comments')
             .then(function(response) {
                   vm.comments = response.data.data  
               })

затем, вычисляемое свойство возвращает массив, о котором писала в начале комментария:

computed: {
 adminComment: function () {
    return this.comments.filter(function (comment) {
      return (comment.user === 'admin')
    })
  }

Почему не срабатывает вторая кнопка? Я понять не могу

[0xD34F]

geometria,

<div v-if="feed_isVisible">
  <div v-for="comment in adminComment" :key="comment.id">
    <div>{{ comment.user }}</div>
    <button @click="feed_isVisible = false">
      Редактировать
    </button>
  </div>
</div>
<div v-else>
  <textarea v-model="text"></textarea>
  <button @click="feed_isVisible = true">
    Отправить
  </button>
</div>

[geometria]

Так работает, но теперь если изначально нет отзыва пользователя, то при:

export default {
   data() {
     return {
     feed_isVisible: true,
             }

Блок с textarea не загружается, а при false не загружается блок с кнопкой "Редактировать"

[0xD34F]

geometria,

<div v-if="feed_isVisible && adminComment.length">

[geometria]

Теперь при отсутствии в БД комментария, при дефолтном feed_isVisible: true, кнопка "Отправить" не скрывает свой блок, а при false не показывает блок с кнопкой "Редактировать", когда комментарий существует

[0xD34F]

geometria, разумеется, всё работает как надо - если правильно сделаны те вещи, о которых вы умолчали (то, что происходит при кликах по "отправить" и "редактировать" помимо изменения значения feed_isVisible). Нет-нет, здесь больше ничего говорить не надо - идите новый вопрос оформляйте.