Home > Backend Development > PHP Tutorial > vue.js - How to traverse the json object returned by php with Vue?

vue.js - How to traverse the json object returned by php with Vue?

WBOY
Release: 2016-10-17 09:30:02
Original
1438 people have browsed it

1. I use ajax to request a piece of data from php, a two-dimensional array on the php side, and return it to the front-end ajax after json_encoding
2. After the front-end receives the data, how to use Vue to traverse it

vue.js - How to traverse the json object returned by php with Vue?

<code>    
    new Vue({
        el:'#nav_vr',
        data:{
            list:null
        },
        methods:{
            showdata:function(id){
                alert(id);
                $.ajax({
                      type:"post",    //提交方法
                      url:"data.php",   //提交地址
                      data:{typeid:id},  //提交参数(可有可无)
                      dataType:"json", //响应结果的类型(可有可无)
                      success:function(d){ //接收响应结果
                          console.log(d);
                            this.list = d;
                      }
                });
            }
        }
    })</code>
Copy after login
Copy after login

vue.js - How to traverse the json object returned by php with Vue?

Reply content:

1. I use ajax to request a piece of data from php, a two-dimensional array on the php side, and return it to the front-end ajax after json_encoding
2. After the front-end receives the data, how to use Vue to traverse it

vue.js - How to traverse the json object returned by php with Vue?

<code>    
    new Vue({
        el:'#nav_vr',
        data:{
            list:null
        },
        methods:{
            showdata:function(id){
                alert(id);
                $.ajax({
                      type:"post",    //提交方法
                      url:"data.php",   //提交地址
                      data:{typeid:id},  //提交参数(可有可无)
                      dataType:"json", //响应结果的类型(可有可无)
                      success:function(d){ //接收响应结果
                          console.log(d);
                            this.list = d;
                      }
                });
            }
        }
    })</code>
Copy after login
Copy after login

vue.js - How to traverse the json object returned by php with Vue?

You pointed to the wrong this

vue.js - How to traverse the json object returned by php with Vue?

:src="{{ i.litpic | addpre }}"
filters: {

<code>        addpre: function (val) {
             return 'http://www.baidu.com' + val
        }
    }
</code>
Copy after login

{{ i.title }}

If the page is bound to v-model, just use v-for to loop the output
You can also use devtool to debug
https://github.com/vuejs/vue-...

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template