使用mpvue开发小程序，v-for新生成的元素上绑定的事件失效

Question

HTML代码如下：

  <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代码如下：
对ajax接口返回的数据做处理：

      for(let i=0;i<res.data.list.length;i++) {
        // 有一些不相关的内容
        let item = {
          content: res.data.list[i],
          top: 18,
          animation: {}
        };
        this.cards.push(item);
        this.showLoading = false;
      }

其中res.data.list中的数据是每次返回10条，
在初次进入页面时，请求接口的前10条数据循环生成的卡片上是有touchstart和touchend事件的，
之后的第二个10条中的数据循环生成的卡片元素上的事件就不起作用了

请问应该怎么改？

Answer 1

测试了一下，并没有发现你说的问题,后来也考虑到view标签，我把ul跟li换成了view标签，发现还是没有复现你的问题；

 </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>