vue中json处理方法

发布于
2017-12-19

json后端给我的数据，现在要将标准陪练-5节这条数据不展示。我的想法第一想法是要么隐藏，要么处理json删除这条数据。我用delete，但是发现原json长度不变只是变空了，而且在v-for渲染的时候报错了

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue-2.3.0.min.js"></script>

</head>
<body>

<div id="myapp">
    <div v-for="item in json">
        <p>{{item.lesson_name}}</p>
    </div>
</div>

</body>
</html>
<script type="text/javascript">

var app = new Vue({
    el:"#myapp",
    data:function(){
        return{
            json:[
                {"type_name":"正课","lesson_name":"标准陪练课（中级）-90节","course_name":"标准陪练","lesson_no":"BZ-c2-3","lesson_num":90,"lesson_id":37,"xufei_buy_num":1,"level_name":"中级","money":11380,"shengyu_lesson_num":100,"free_lesson_num":12,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:32:41","lesson_min":50,"shouci_buy_num":1},
                {"type_name":"正课","lesson_name":"标准陪练课（中级）-120节","course_name":"标准陪练","lesson_no":"BZ-c2-4","lesson_num":120,"lesson_id":38,"xufei_buy_num":0,"level_name":"中级","money":14180,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:33:38","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正课","lesson_name":"标准陪练课（中级）-200节","course_name":"标准陪练","lesson_no":"BZ-c2-5","lesson_num":200,"lesson_id":39,"xufei_buy_num":0,"level_name":"中级","money":22880,"shengyu_lesson_num":217,"free_lesson_num":17,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:35:01","lesson_min":50,"shouci_buy_num":1},
                {"type_name":"正课","lesson_name":"标准陪练课（高级）-30节","course_name":"标准陪练","lesson_no":"BZ-c3-1","lesson_num":30,"lesson_id":40,"xufei_buy_num":1,"level_name":"高级","money":4680,"shengyu_lesson_num":35,"free_lesson_num":10,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:36:20","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正课","lesson_name":"标准陪练课（高级）-60节","course_name":"标准陪练","lesson_no":"BZ-c3-2","lesson_num":60,"lesson_id":41,"xufei_buy_num":1,"level_name":"高级","money":9180,"shengyu_lesson_num":58,"free_lesson_num":2,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:37:36","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正课","lesson_name":"标准陪练课（高级）-90节","course_name":"标准陪练","lesson_no":"BZ-c3-3","lesson_num":90,"lesson_id":42,"xufei_buy_num":0,"level_name":"高级","money":13480,"shengyu_lesson_num":91,"free_lesson_num":3,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:38:41","lesson_min":50,"shouci_buy_num":1},
                {"type_name":"正课","lesson_name":"标准陪练课（高级）-120节","course_name":"标准陪练","lesson_no":"BZ-c3-4","lesson_num":120,"lesson_id":43,"xufei_buy_num":0,"level_name":"高级","money":17080,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:39:45","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正课","lesson_name":"标准陪练课（高级）-200节","course_name":"标准陪练","lesson_no":"BZ-c3-5","lesson_num":200,"lesson_id":44,"xufei_buy_num":0,"level_name":"高级","money":27680,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-10-16 13:40:58","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正课","lesson_name":"标准陪练-20节","course_name":"标准陪练","lesson_no":"BZ-c0-02","lesson_num":20,"lesson_id":64,"xufei_buy_num":0,"level_name":"全级别","money":2000,"shengyu_lesson_num":0,"free_lesson_num":0,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-11-24 15:15:22","lesson_min":50,"shouci_buy_num":0},
                {"type_name":"正课","lesson_name":"标准陪练-5节","course_name":"标准陪练","lesson_no":"BZ-c0-01","lesson_num":20,"lesson_id":63,"xufei_buy_num":0,"level_name":"全级别","money":2000,"shengyu_lesson_num":14,"free_lesson_num":0,"mode_name":"陪练","tuifei_num":0,"modify_date":"2017-11-24 15:14:44","lesson_min":25,"shouci_buy_num":1}
            ]
        }
    },
    created:function(){
        //解开就报错 
        // for (let i = 0; i < this.json.length; i++) {
        //     console.log(i)
        //     for(let k in this.json[i]){
        //         if (this.json[i][k] == "标准陪练-5节") {
        //             delete this.json[i];
        //             break;
        //         }
        //     }
        // }
    }
})

</script>

javascript html css vue.js 前端

阅读 7.7k

4 个回答

Poised_flw

✓ 已被采纳

首先，不需要显示的数据你不调用不就行了么？

this.json = this.json.filter(lesson => lesson.lesson_name !== '标准xxx');

山佳

53351934

发布于
2017-12-19

computed:{

needJson(){
    let a=this.json.pop()
    return this.json.filter(v=>{
        return v!=a
    }）
}

}
然后 v-for="item in needJson"

luozz

5.8k3629

发布于
2017-12-19

我觉得你这个把它整麻烦了，完全没必要非要去操作数据，你不想要那条数据，就不让那一条显示就好，而且你可以把你现在created周期里的函数放到mouted里面试一下，看是不是你那个逻辑写错了。

我的解决办法是(不用created里面删除数据，不显示那一条就行)：

<div id="myapp">
    //当根据数据循环创建时，若课程名称不等于不想显示的那一条数据才使其创建，否则不创建
    <div v-for="item in json" v-if="item.lesson_name != '标准陪练-5节'">
        <p>{{item.lesson_name}}</p>
    </div>
</div>

腹中有书气自华

2k73450

发布于
2017-12-19

大兄弟，用你的方法我也试了下没问题
下面是代码

<div id="app">
    <ul>
        <li v-for="needJson in needJsons">{{needJson}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                jsons: [
                    {
                        "type_name": "正课",
                        "lesson_name": "标准陪练课（中级）-90节",
                        "course_name": "标准陪练",
                        "lesson_no": "BZ-c2-3",
                        "lesson_num": 90,
                        "lesson_id": 37,
                        "xufei_buy_num": 1,
                        "level_name": "中级",
                        "money": 11380,
                        "shengyu_lesson_num": 100,
                        "free_lesson_num": 12,
                        "mode_name": "陪练",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:32:41",
                        "lesson_min": 50,
                        "shouci_buy_num": 1
                    },
                    {
                        "type_name": "正课",
                        "lesson_name": "标准陪练课（中级）-120节",
                        "course_name": "标准陪练",
                        "lesson_no": "BZ-c2-4",
                        "lesson_num": 120,
                        "lesson_id": 38,
                        "xufei_buy_num": 0,
                        "level_name": "中级",
                        "money": 14180,
                        "shengyu_lesson_num": 0,
                        "free_lesson_num": 0,
                        "mode_name": "陪练",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:33:38",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正课",
                        "lesson_name": "标准陪练课（中级）-200节",
                        "course_name": "标准陪练",
                        "lesson_no": "BZ-c2-5",
                        "lesson_num": 200,
                        "lesson_id": 39,
                        "xufei_buy_num": 0,
                        "level_name": "中级",
                        "money": 22880,
                        "shengyu_lesson_num": 217,
                        "free_lesson_num": 17,
                        "mode_name": "陪练",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:35:01",
                        "lesson_min": 50,
                        "shouci_buy_num": 1
                    },
                    {
                        "type_name": "正课",
                        "lesson_name": "标准陪练课（高级）-30节",
                        "course_name": "标准陪练",
                        "lesson_no": "BZ-c3-1",
                        "lesson_num": 30,
                        "lesson_id": 40,
                        "xufei_buy_num": 1,
                        "level_name": "高级",
                        "money": 4680,
                        "shengyu_lesson_num": 35,
                        "free_lesson_num": 10,
                        "mode_name": "陪练",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:36:20",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正课",
                        "lesson_name": "标准陪练课（高级）-60节",
                        "course_name": "标准陪练",
                        "lesson_no": "BZ-c3-2",
                        "lesson_num": 60,
                        "lesson_id": 41,
                        "xufei_buy_num": 1,
                        "level_name": "高级",
                        "money": 9180,
                        "shengyu_lesson_num": 58,
                        "free_lesson_num": 2,
                        "mode_name": "陪练",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:37:36",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正课",
                        "lesson_name": "标准陪练课（高级）-90节",
                        "course_name": "标准陪练",
                        "lesson_no": "BZ-c3-3",
                        "lesson_num": 90,
                        "lesson_id": 42,
                        "xufei_buy_num": 0,
                        "level_name": "高级",
                        "money": 13480,
                        "shengyu_lesson_num": 91,
                        "free_lesson_num": 3,
                        "mode_name": "陪练",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:38:41",
                        "lesson_min": 50,
                        "shouci_buy_num": 1
                    },
                    {
                        "type_name": "正课",
                        "lesson_name": "标准陪练课（高级）-120节",
                        "course_name": "标准陪练",
                        "lesson_no": "BZ-c3-4",
                        "lesson_num": 120,
                        "lesson_id": 43,
                        "xufei_buy_num": 0,
                        "level_name": "高级",
                        "money": 17080,
                        "shengyu_lesson_num": 0,
                        "free_lesson_num": 0,
                        "mode_name": "陪练",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:39:45",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正课",
                        "lesson_name": "标准陪练课（高级）-200节",
                        "course_name": "标准陪练",
                        "lesson_no": "BZ-c3-5",
                        "lesson_num": 200,
                        "lesson_id": 44,
                        "xufei_buy_num": 0,
                        "level_name": "高级",
                        "money": 27680,
                        "shengyu_lesson_num": 0,
                        "free_lesson_num": 0,
                        "mode_name": "陪练",
                        "tuifei_num": 0,
                        "modify_date": "2017-10-16 13:40:58",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正课",
                        "lesson_name": "标准陪练-20节",
                        "course_name": "标准陪练",
                        "lesson_no": "BZ-c0-02",
                        "lesson_num": 20,
                        "lesson_id": 64,
                        "xufei_buy_num": 0,
                        "level_name": "全级别",
                        "money": 2000,
                        "shengyu_lesson_num": 0,
                        "free_lesson_num": 0,
                        "mode_name": "陪练",
                        "tuifei_num": 0,
                        "modify_date": "2017-11-24 15:15:22",
                        "lesson_min": 50,
                        "shouci_buy_num": 0
                    },
                    {
                        "type_name": "正课",
                        "lesson_name": "标准陪练-5节",
                        "course_name": "标准陪练",
                        "lesson_no": "BZ-c0-01",
                        "lesson_num": 20,
                        "lesson_id": 63,
                        "xufei_buy_num": 0,
                        "level_name": "全级别",
                        "money": 2000,
                        "shengyu_lesson_num": 14,
                        "free_lesson_num": 0,
                        "mode_name": "陪练",
                        "tuifei_num": 0,
                        "modify_date": "2017-11-24 15:14:44",
                        "lesson_min": 25,
                        "shouci_buy_num": 1
                    }
                ]
            }
        },
        computed: {
            needJsons: function () {
                let _this = this;
                this.jsons.forEach(function (item, index) {
                    if (item.lesson_name === '标准陪练-5节') {
                        _this.jsons.splice(index, 1);
                    }
                })
                return _this.jsons
            }
        }

    })

不过还是推荐使用v-if 来达到目的

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

vue中json处理方法

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

css布局怎么保证右边一直在可视范围内？

Element Plus表格组件如何呈现复杂布局如图？

请问开发React Native，一般是推荐哪个主流的UI库呢？

多个vue项目，后台接口都是一样的，每个vue项目的同一个页面都只是一小部分修改，怎样把公共的代码提出来复用？