javascript - 图像在过滤列表中自行卸载

Question

我有一个过滤图像列表，其中包含用于更改过滤器的按钮，其中更改渲染列表。

问题是来回切换后有时图像会被卸载并需要重新下载。

我尝试使用 v-once 但仍然无法解决问题

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 中删除图像，我在想是否可以让它像 v-show 那样不显示？

Answer 1

这里的问题是您在过滤时重新渲染 img 元素，从而再次获取图像。

我已经删除了计算属性，而是呈现了完整列表。为了进行过滤，我在 .list-complete-item 上使用了 v-show 来切换可见性。

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>