vue 的 函数引入 index 问题
2017-06-28 16:27
330 查看
今天研究vue 跟着 教程 做了一个小demo。实现表格的 增删内容
如果添加 一条信息 点击提交 会在表格添加一行。
如果点击删除的话就会删除点击的那一行,要实现这个功能 就要得到点击的tr的 index 。根据老教程是这样的
/*************html******
<tr v-for="message in messages">
<td>{{message.name}}</td>
<td>{{message.age}}</td>
<td>{{message.sex}}</td>
<td><button v-on:click = "deleteData($index)">删除</button></td>
</tr>
/*************js*****
deleteData:function(index){
this.messages.splice(index,1);
}
js部分是没有问题的,主要是传入的参数 index 出现错误
主要原因是因为 vue2.0 移除了$index $key ,所以 引用index 要采用以下的方式:
***************************
<tr v-for="(message,index) in messages">
<td>{{message.name}}</td>
<td>{{message.age}}</td>
<td>{{message.sex}}</td>
<td><button v-on:click = "deleteData(index)">删除</button></td>
</tr>
github 地址 : https://github.com/mawuyun/vue/blob/master/vue/html/testVueOne.html
如果添加 一条信息 点击提交 会在表格添加一行。
如果点击删除的话就会删除点击的那一行,要实现这个功能 就要得到点击的tr的 index 。根据老教程是这样的
/*************html******
<tr v-for="message in messages">
<td>{{message.name}}</td>
<td>{{message.age}}</td>
<td>{{message.sex}}</td>
<td><button v-on:click = "deleteData($index)">删除</button></td>
</tr>
/*************js*****
deleteData:function(index){
this.messages.splice(index,1);
}
js部分是没有问题的,主要是传入的参数 index 出现错误
主要原因是因为 vue2.0 移除了$index $key ,所以 引用index 要采用以下的方式:
***************************
<tr v-for="(message,index) in messages">
<td>{{message.name}}</td>
<td>{{message.age}}</td>
<td>{{message.sex}}</td>
<td><button v-on:click = "deleteData(index)">删除</button></td>
</tr>
github 地址 : https://github.com/mawuyun/vue/blob/master/vue/html/testVueOne.html
相关文章推荐
- 页面中使用已经引入的jquery插件,结果却提示JS报错找不到函数【问题解决】
- 学习vue-cli时需要引入外部js库文件(如jquery)的问题,百度后解决了,再次备忘一下
- 关于vue引入外部未安装js,部署问题解决
- vue 引入stylus文件 报错问题
- 问题杂记-Vue组件中使用地址引入图片
- CString的几个字符串处理函数的index问题
- Vue中使用 setTimeout() setInterval()函数的问题
- vue一个组件引入多个swiper轮播可能引发的分页器数量异常问题
- java 聚合工程同级相互引入函数问题。interface无法引入与父类相同级别的common中的函数
- 解决vue 项目引入字体图标报错、不显示等问题
- vue.js在laravel框架模板文件中引入失败问题
- 问题:vue.js a标签href里有变量,函数拼接问题
- 在Vue项目中引入css出现问题解决方法
- Vue 引入ElementUI 2.0.11:依赖未发现的问题
- 关于vue组件中定时器中只能使用箭头函数的问题
- CI去除index.php和引入文件的路径问题
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- vue引入图片问题
- vue 引入子组件报错问题
- 解决vue 引入子组件报错的问题