Изображение выгружается в отфильтрованный список - PullRequest
Новая
       5

Изображение выгружается в отфильтрованный список

0 голосов
/ 16 мая 2019

У меня есть отфильтрованный список изображений с кнопками для изменения фильтра, в котором изменяется отрендеренный список.

Проблема заключается в том, что после переключения назад и вперед иногда изображения выгружаются и должны быть загружены снова.

Я пытался использовать v-один раз, но проблема все еще не решена

Codepen 

<button v-on:click="filter('all')">All</button>
  <button v-on:click="filter('tag1')">Tag 1</button>
  <button v-on:click="filter('tag2')">Tag 2</button>

  <div class="list-complete"      tag="section">
    <div
      v-for="item in filteredItems"
      v-bind:key="item.id"
      class="list-complete-item"
    >
      <img class="list-complete-img" :src="item.img" alt="" />
  </div>
</div>

methods: {
  filter(tag) {
    this.currentTag= tag;
  }
},
computed: {
  filteredItems: function() {
    var filter = this.currentTag;
    return this.items.filter(function(item) {
        return item.tags.indexOf(filter) !== -1;
    });
  }
}

По какой-то причине эта проблема оченьтрудно вызвать в примере codepen (он выгружается только иногда), но в моей локальной среде разработки изображения выгружаются каждый раз, когда я переключаю фильтры.

Вычисленные фильтры Vue будут удалять изображения непосредственно из Dom, IЯ думаю, что можно было бы позволить, чтобы он просто отображался, как v-show?

1 Ответ

1 голос
/ 16 мая 2019

Проблема здесь в том, что вы повторно визуализируете элементы img при фильтрации, таким образом, изображения извлекаются снова.

Я удалил вычисленное свойство и вместо этого отобразил полный список.Для фильтрации я использовал v-show на .list-complete-item для переключения видимости. 

new Vue({
  el: '#list-complete-demo',
  data: {
    items: [{
        id: 1,
        tags: ['all', 'tag1'],
        img: 'https://source.unsplash.com/random/800x600'
      },
      {
        id: 2,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x601'
      },
      {
        id: 3,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x602'
      },
      {
        id: 4,
        tags: ['all', 'tag1'],
        img: 'https://source.unsplash.com/random/800x603'
      },
      {
        id: 5,
        tags: ['all', 'tag1'],
        img: 'https://source.unsplash.com/random/800x604'
      },
      {
        id: 6,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x605'
      },
      {
        id: 7,
        tags: ['all', 'tag1'],
        img: 'https://source.unsplash.com/random/800x606'
      },
      {
        id: 8,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x607'
      },
      {
        id: 9,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x608'
      },
      {
        id: 10,
        tags: ['all', 'tag1'],
        img: 'https://source.unsplash.com/random/800x608'
      },
      {
        id: 11,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x609'
      },
      {
        id: 12,
        tags: ['all', 'tag1'],
        img: 'https://source.unsplash.com/random/800x610'
      },
      {
        id: 13,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x611'
      },
      {
        id: 14,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x612'
      },
      {
        id: 15,
        tags: ['all', 'tag1'],
        img: 'https://source.unsplash.com/random/800x613'
      },
      {
        id: 16,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x614'
      },
      {
        id: 17,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x615'
      },
      {
        id: 18,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x616'
      },
      {
        id: 19,
        tags: ['all', 'tag1'],
        img: 'https://source.unsplash.com/random/800x617'
      },
      {
        id: 20,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x618'
      },
      {
        id: 21,
        tags: ['all', 'tag1'],
        img: 'https://source.unsplash.com/random/800x619'
      },
      {
        id: 22,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x620'
      },
      {
        id: 23,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x621'
      },
      {
        id: 24,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x622'
      },
      {
        id: 25,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x623'
      },
      {
        id: 26,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x624'
      },
      {
        id: 27,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x625'
      },
      {
        id: 28,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x626'
      },
      {
        id: 29,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x627'
      },
      {
        id: 30,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x628'
      },
      {
        id: 31,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x629'
      },
      {
        id: 32,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x630'
      },
      {
        id: 33,
        tags: ['all', 'tag2'],
        img: 'https://sour3ce.unsplash.com/random/800x631'
      },
      {
        id: 34,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x632'
      },
      {
        id: 35,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x633'
      },
      {
        id: 36,
        tags: ['all', 'tag2'],
        img: 'https://sour46e.unsplash.com/random/800x634'
      },
      {
        id: 37,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x635'
      },
      {
        id: 38,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x636'
      },
      {
        id: 39,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x637'
      },
      {
        id: 40,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x638'
      },
      {
        id: 41,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x639'
      },
      {
        id: 42,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x640'
      },
      {
        id: 43,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x641'
      },
      {
        id: 44,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x642'
      },
      {
        id: 45,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x643'
      },
      {
        id: 46,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x644'
      },
      {
        id: 47,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x645'
      },
      {
        id: 48,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x646'
      },
      {
        id: 49,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x647'
      },
      {
        id: 50,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x648'
      },
      {
        id: 51,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x649'
      },
      {
        id: 52,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x650'
      },
      {
        id: 53,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x651'
      },
      {
        id: 54,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x652'
      },
      {
        id: 55,
        tags: ['all', 'tag2'],
        img: 'https://source.unsplash.com/random/800x653'
      }

    ],
    currentTag: 'all'
  },
  methods: {
    shuffle: function() {
      this.items = _.shuffle(this.items)
    },
    filter: function(tag) {
      this.currentTag = tag;
    }
  }
})
.list-complete {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}

.list-complete-item {
  transition: transform 1s;
  flex: 1 1 25%;
  height: 200px;
  padding: 10px;
  /*   display: inline-block;
  margin-right: 10px; */
}

.list-complete-img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.list-complete-enter,
.list-complete-leave-to
/* .list-complete-leave-active for <2.1.8 */

{
  opacity: 0;
  transform: translateY(30px);
}

.list-complete-leave-active {
  position: absolute;
}
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<div id="list-complete-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button> Filter:
  <button v-on:click="filter('all')">All</button>
  <button v-on:click="filter('tag1')">Tag 1</button>
  <button v-on:click="filter('tag2')">Tag 2</button>

  <div class="list-complete" tag="section">
    <template v-for="item in items">
    <div
      v-bind:key="item.id"
      class="list-complete-item"
      v-show="item.tags.includes(currentTag)"
    >
      <img class="list-complete-img" :src="item.img" alt="" />
  </div>
  </template>
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...