Как настроить таргетинг элементов DOM в v-for - PullRequest
Новая
       7

Как настроить таргетинг элементов DOM в v-for

0 голосов
/ 06 июня 2018

Контекст: Я создаю небольшую социальную сеть, чтобы обнаружить vue.js.На странице временной шкалы у меня есть сообщения и комментарии (проблема в комментариях)

На самом деле я отображаю все комментарии, и я СЕЙЧАС хочу с помощью кнопки Скрыть комментарии , чтобы разрешить отображение толькодва последних комментария и скрыть все остальные.

Я хочу использовать класс CSS, чтобы скрыть их.

Я не могу выполнить функцию в «области ввода», и я не нахожу никакой информации об этом в документации.

Код:

Первый пункт: у меня есть API, который отправляет мне информацию. 

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;
      });
  },
}
<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>

Вопрос: Как лучше всего изменять комментарии, когда я нажимаю на кнопку hideComments и отображаю толькодва последних комментария.

1 Ответ

0 голосов
/ 06 июня 2018

Я не пробовал, но это должно сработать.

Добавьте переменную в свои данные 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

...