addCart以及decreaseCart方法，默认会传入event原生dom事件，food数据是从父组件传入的，所以对这个数据的修改，也能够反应到父组件，也因为购物车的数据也是从父组件传入的，使用同一个food数据，从而关联到购物车的购买数量统计。
<script> export default { name: "cartcontrol", props: { food: { type: Object } }, data() { return { } }, methods: { addCart (event) { console.log(event) if (!event._constructed) { return } if (!this.food.count) { this.$set(this.food, 'count', 1) } else { this.food.count++ } this.$emit('add', event.target) }, decreaseCart (event) { if (!event._constructed) { return } if (this.food.count) { this.food.count-- } } }, } </script>
异步问题
<div v-for="(item,index) in various" :key="index"> <div> <div></div> <p>{{item[0].name}}</p> <div></div> </div> <div> <div> <img :src="item[0].urll" alt=""> </div> <div ref="listwrapper"> <div> <div v-for="(u,i) in item.slice(1)" :key="i"> <img :src="u.url" alt=""> </div> </div> </div> </div> </div>
这里循环嵌套，整个DOM结构都是循环出来的，而better-scroll需要操作DOM结构，要实现横向滑动效果，难免会有异步问题。
可是无论我使用.then或者$nextTick都无法挂载better-scroll，查阅了大量文档也无法解决，最后只能使用原生的overflow-X，若是有解决办法，欢迎提出，感激不尽!
结语
总的来说这个项目还有很多不足，实现的功能也很少，后续我会继续改进。
如果这篇文章对你有帮助，不妨点个赞吧！
总结
以上所述是小编给大家介绍的Vue实战教程之仿肯德基宅急送App,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！