Use mpvue to develop Mini Program. Events bound to newly generated elements of v-for are invalidated.

the HTML code is as follows:

  <view
    v-show="!showLoading"
    v-for="(item, index) in cards"
    :key="index"
    class="body-swiper"
    @touchstart="touchstart"
    @touchend="touchend($event, index, item.content.user.id)"
    :style="{"z-index": (10 - index), top: item.top + "px"}"
    :animation="item.animation">
      <!--  -->
  </view>

js code is as follows:
process the data returned by the ajax API:

      for(let i=0;i<res.data.list.length;iPP) {
        // 
        let item = {
          content: res.data.list[i],
          top: 18,
          animation: {}
        };
        this.cards.push(item);
        this.showLoading = false;
      }

where res.data.list returns 10 pieces of data at a time. When
enters the page for the first time, the card generated by the first 10 data loops of the request interface has touchstart and touchend events. The events on the card elements generated by the second 10 data loops after
have no effect

how should I change it?

Vue.js Mini-Program mpvue

Jul.18,2022

tested and did not find the problem you said. Later, considering the view tag, I replaced ul and li with view tag, and found that your problem did not reappear.

 </div>
       <section class="container_content">
         <ul>
           <li v-for="(item,index) in lists" :key="index"  @touchstart="touchstart"> 
               <div class="address_content">
              <img src="../../assets/logo.png" alt="">
             <div class="address_detail">
               <div class="address_title">{{item.addreddTitle}}</div>
               <div class="address_number">{{item.addressNumber}}</div>
             </div>
             </div>
           </li>
         </ul>
         <div @click="add"></div>
       </section>
  </div>

<script>
export default {
  data () {
    return {
      lists: [1, 2, 3, 4]
    }
  },
  computed: {},
  components: {},
  created () {},
  methods: {
    touchstart () {
      console.log(1111)
    },
    add () {
      this.lists.push(7)
    }
  }
}
</script>

Previous: On Nodejs Sequelize data Migration

Next: Two-way recording of flutter outbound calls

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c26e51-3382b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c26e51-3382b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?