(尚024)Vue_案例_交互删除
2023-09-11 14:14:08 时间
注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!!
首先明白,删除在Item.vue中交互
1.写交互,首先写监听@click="deleteItem"(不要用delete,因为是关键字)
2.写对应的方法
3.App.vue中删除指定下标的评论
4.deleteComment()这个方法最终要传给Item.vue 组件
但Item.vue现在看不到,需要逐层传递
5.List.vue中需要声明deleteComment属性,
6.声明属性,但是本身我也不用,我叫Item去用,:deleteComment="deleteComment"
7.在Item.vue中声明
8.现在可以在if(){}中调用deleteComment(),但是没有传index
9.List.vue中传递index ,:index="index"
10.需要在Item.vue中声明index为number类型,index:number
11.全部删除后出现问题截图
12.修改List.vue组件
comments.length===0没数据的时候才会显示
13.运行截图:
这儿没有去刷新界面,用到了hmr技术(热替换),不是完整的去更新整个模块,而是只更新了自己更改的模块,自己原来的窗口还在.
相关文章
- 简单vue项目脚手架
- 一套Vue的单页模板:N3-admin
- Vue_(Router路由)-vue-router路由的基本用法
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- vue和微信小程序的区别、比较
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue.js 3.2.22:平滑回到顶部
- vue npm run serve/dev命令后台运行:nohup npm run serve >web.log 2>&1 & exit
- Vue入门教程:node安装vue命令行工具及启动项目
- 一个典型的Vue应用的App.vue
- vue品牌列表案例demo
- vue学习:xmg vue学习笔记2/14代码案例
- Vue.js 组件(component)demo小案例
- vue-seamless-scroll 好用的无缝滚动插件
- Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
- vue如何加入百度ssp广告位代码
- Vue中vue-i18n结合vant-ui实现国际化
- Vue、Vuejs从入门到精通 | vue-router详解
- 235:vue+openlayers 绘制带有径向渐变填充色的圆形
- 132:vue+openlayers: 设置显示图层的层级数zIndex (示例代码)
- Vue中计算属性computed与method的区别