Vue.js根据列表某列值更新filter
2017-12-27 11:14
309 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="../Scripts/jquery-1.10.2.min.js"></script> </head> <body> <div id="matchList" > <input type="button" value="刷新" onclick="refesh()" /> <div v-for="(item,index) in eventList":id="item.id"> {{item.name}} </div> </div> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> <script type="text/javascript"> var data = [{ "id": "1", "name": "hh1" }, { "id": "2", "name": "hh2" }, { "id": "3", "name": "hh3" }]; var vm = null; vm=new Vue({ el: "#matchList", data: { eventList: data } }); var eventNum = -1; function refesh() { data = [{ "id": "1", "name": "hh11" }]; //vm.eventList = data; for (var i = 0; i < data.length; i++) { var name = data[i].name; var id = data[i].id; var item = $(vm.eventList).filter(function (index, item) { if (item.id == id) { eventNum = index; } }); if (eventNum > -1) { console.log(eventNum); vm.eventList[eventNum] = data[i]; console.log(vm.eventList[0]); } } //vm.eventList[0] = data[0]; vm.$set(vm.eventList, 0, vm.eventList[0]); } </script> </body> </html>
相关文章推荐
- Vue.js列表渲染难点:对象中数组深度更新问题
- Vue.js+Layer表格数据绑定与实现更新
- 从Vue.js源码看异步更新DOM策略及nextTick
- 前端人员必知的Vue.js条件v-if与列表循环v-for相关用法
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- vue.js 列表数据加载更多
- vue.js 初步--动态订单结算列表
- vue.js控制列表的每一项
- 关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
- Vue.js 表格查询与更新
- Vue——渲染(文本、列表)、列表数据更新
- vue.js中$set与数组更新
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面
- Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
- vue.js中的列表渲染(循环渲染)(v-for)
- 初识ReactJS的组件化开发(五):ajax加载评论列表,并定时获取更新
- VUEJS实战之构建基础并渲染出列表(1)
- Vue.js列表输出不同style
- Vue.js入门学习--列表渲染--v-for遍历数组生成元素(四)
- vue.js根据代码运行环境选择baseurl的方法