varletjs / varlet

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
https://varletjs.org/#/en-US/index
MIT License
4.82k stars 607 forks source link

var-list var-cell 中加入图片组件后,无法引用item中的元素 #1557

Closed jiuzheyang closed 3 months ago

jiuzheyang commented 3 months ago

Bug report 🐞

<template>
  <view class="content">
    <var-swipe class="swipe-example" :autoplay="2000">
      <var-swipe-item>
        <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat.jpg">
      </var-swipe-item>
      <var-swipe-item>
        <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat2.jpg">
      </var-swipe-item>
      <var-swipe-item>
        <img class="swipe-example-image" src="https://varlet.gitee.io/varlet-ui/cat3.jpg">
      </var-swipe-item>
    </var-swipe>
  </view>
  <var-list :finished="finished" v-model:loading="loading" @load="load">
    <var-cell :key="item" v-for="item in list">
      {{item.src}}
      <var-card title="本草纲目" subtitle="我表情悠哉 跳个大概"
        description="如果华佗再世,崇洋都被医治,外邦来学汉字,激发我民族意识。马钱子、决明子、苍耳子,还有莲子;黄药子、苦豆子、川楝子,我要面子。用我的方式,改写一部历史。没什么别的事,跟着我念几个字。山药当归枸杞 GO,山药 当归 枸杞 GO,看我抓一把中药,服下一帖骄傲~"
        src="{{item.src}}" />
    </var-cell>
  </var-list>

</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        finished: false,
        list: [{
            src: "https://varlet.gitee.io/varlet-ui/cat.jpg"
          },
          {
            src: "https://varlet.gitee.io/varlet-ui/cat2.jpg"
          },
          {
            src: "https://varlet.gitee.io/varlet-ui/cat3.jpg"
          }
        ]
      }
    },
    methods: {
      load() {
        setTimeout(() => {
          for (let i = 0; i < 20; i++) {
            let src = this.list[20 % this.list.length]
            console.log(src)
            this.list.push(src)
          }

          this.loading = true

          if (this.list.length >= 60) {
            this.finished = true
          }
        }, 1000)
      }
    }
  }
</script>

<style lang="scss">
  .swipe-example {
    height: 160px;
  }

  .swipe-example-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
</style>

Version & Environment

最新版,vue3

Expectation

image

Actual results (or Errors)

Reproduction link

haoziqaq commented 3 months ago

vue v-bind 语法 :src="item.src"