@click events in Li that are traversed by v-for in Vue.js 1.0 are not valid on the mobile side

The @click event in Li that is traversed by vue.js using v-for is not valid on the mobile side and can be executed on the web side, as shown in the code below

<template> <div class= "rating-section" ref= "ratingsection" > <div> <div class= "comprehensive" > <div class= "Score" > <div class= "Mark" >{{seller.score}}</div> <div class         = "Text" > Comprehensive score </div> <div class= "Compare" > higher than surrounding merchant {{seller.rankrate}}%</div> </div> <div class= "Service" > <div class= "Service-item" > <span class= "lable-text" > Services Attitude </span> <div class= "Star-container" > <star:size= ": score=" Seller.servicescore "></star> </div> <span class=" Inline-score ">{{seller.servicescore}}</span&gt          ;            </div> <div class= "Service-item" > <span class= "lable-text" > Food reviews </span>            <div class= "Star-container" > <star:size= ": score=" Seller.foodscore "></star> </div&Gt <span class= "Inline-score" >{{seller.foodScore}}</span> </div> <div class= "service-i Tem "> <span class=" lable-text "> Delivery time </span> <span class=" Delivery ">{{seller.deli Verytime}} minutes </span> </div> </div> </div> <div class= "Rating-container "> <div class=" Setter "> <rating-select:options=" Options "></rating-select> &lt ;/div> <div class= "rating-setting" @click = "Onlycontentclick" > <span class= "icon-check_circle" : class= "{' Highlight ': onlycontent}" ></span> <span class= "text" > see only Content Reviews </span> </di v> <div class= "rating-list" > <ul> <li class= "item-rating" V- for= "Item in ratings" > <div class= "Avart" >  & lt;/div> <div class= "Content" > <div class= "username" >{{item.username}}</div&                Gt <div class= "User-score" > <div class= "Score" > <star:size= "" ": score=" I Tem.score "></star> </div> <span v-show=" item.deliverytime>0 ">{{i Tem.deliverytime}} minutes delivery </span> </div> <div class= "text" >{{item.text}}</d iv> <div class= "thumbs-up" > <span class= "split": class= "[{' Icon-thumb_down ': it  em.ratetype===0},{' icon-thumb_up ': item.ratetype===1}] "></span> <span class=" Thumb-item split " V- for= "R in Item.recommend" >{{r}}</span> </div> </div> </li> </ul> </div> </div> </div> </div></template><script>Import Bscroll from' Better-scroll '; Import Ratingselect from‘.. /ratingselect/ratingselect.vue '; Import Star from‘.. /star/star.vue '; Const ERROR_OK= 0; Exportdefault{data () {return{ratings: [], Onlycontent:false, Options: [{text:All, Count:57, type:' Positive '}, {text:Satisfaction, Count:47, type:' Positive '}, {text:' Not satisfied ', Count:10, type:' Negative '          }]      }; }, created () { This. LoadData (); }, Props: {seller: {type:object,default () {          return {}; }}, components: {star, Ratingselect}, methods: {Onlycontentclick () { This. Onlycontent =! This. onlycontent; }, LoadData () { This. $http. Get ('/getratings '). Then (res = {          if(Res.body.code = = =ERROR_OK) {             This. Ratings =Res.body.result;  This. $nextTick (() = {              if(! This. Ratingscroll) {                 This. Initscroll (); } Else {                 This. Ratingscroll.refresh ();          }            });      }        }); }, Initscroll () { This. Ratingscroll =NewBscroll ( This. $refs. ratingsection, {click:true  //better-scroll Default blocks the browser's native click event. When set to True,better-scroll, a click event is dispatched        }); }    }  };</script><style scoped lang= "Stylus" rel= "Stylesheet/stylus" >. Rating-Section position Absolute;    Top 176px;    Bottom 0px;    Overflow hidden; Width100%; Font-size 0; Background-color RGB (243, 245, 247);      . Comprehensive display flex; padding 18px0; Background-color #FFF; Border-bottom 1px solid Rgba (7, 17, 27,. 1);        . score padding 0px 16px; Border-right 1px solid Rgba (7, 17, 27,. 1); Text-Align Center; . Mark Margin-Bottom 6px; Line-height 28px; Font-size 24px; Color RGB (255, 153, 0); . Text Margin-bottom 8px; Line-height 12px; Font-size 12px; Color RGB (7, 17, 27); . Compare Margin-Bottom 6px; Line-height 10px; Font-size 10px; Color Rgba (7, 17, 27,. 6); . Service Flex1; Padding-Left 16px; . Service-Item Margin-bottom 8px; Line-height 18px; Font-size 12px; . lable-text color rgb (7, 17, 27); . Inline-score color RGB (255, 153, 0); . Delivery Color RGB (147, 153, 159); . Star-container Display inline-Block; &:last-Child margin-bottom 0; . Rating-container margin-top 18px; Background-color #fff; Border-top 1px solid Rgba (7, 17, 27,. 1); . Setter padding018px; Border-bottom 1px solid Rgba (7, 17, 27,. 1); . Rating-setting padding 12px 18px; Font-size 0; Color RGB (147, 153, 159); . Icon-check_circle margin-Right 4px; Font-size 24px; &. Highlight color #00c850; . text Font-size 12px; Line-height 24px; Vertical-Align Top; . Rating-list padding 18px 18px 0px 18px; Border-top 1px solid Rgba (7, 17, 27,. 1); . Item-rating Display flex; padding 18px0; Font-size 12px; Border-bottom 1px solid Rgba (7, 17, 27,. 1); &:first-Child padding-top 0; . Avart margin-Right 12px;              IMG width 28px;              Height 28px; Border-radius 50%; . Content Font-size 10px; Line-height 12px; . Username Color RGB (7, 17, 27); . User-score color RGB (147, 153, 159); . score Display Inline-Block; . Text Margin-Bottom 7px; Font-size 12px; Line-height 18px; Color RGB (7, 17, 27); . Thumbs-Up . Split margin-Right 8px; &:last-Child margin-right 0; . Icon-thumb_up color #00a0dc; . Icon-Thumb_down color RGB (183, 187, 191); . Thumb-Item Display Inline-Block;                padding 0px 6px; Margin-bottom 4px; Line-height 16px; Font-size 9px; Color RGB (147, 153, 159); Border-radius 2px; Background-color RGB (255, 255, 240,. 1); Border 1px solid Rgba (7, 17, 27,. 1);</style>

It should be the reason you used Better-scroll, which by default will block touch events. So we need to add click:true in the configuration.

The specific configuration can also be viewed Https://github.com/ustbhuangyi/better-scroll

@click events in Li that are traversed by v-for in Vue.js 1.0 are not valid on the mobile side