Vuejs嵌套了JSON响应

时间：2016-12-16 02:31:05

标签： json vue.js

这里是：

我可以访问一个vue模型值，这个值是从一个循环中的ajax请求创建的，如下所示：

{{ post.id}}

但我无法访问：

{{ post.featuredImageUrl.id}} 


<div id="frontpage">
    <div id="app" class="container">
      <ul>
        <li v-for="post in posts">
            <div v:if="post.featured_media">
                    <!—-do not work—>               
                    <p>{{post.featuredImageUrl.id}}</p>
                    <!—-works—>             
                <p>{{post.id}}</p>
            </div>
            <div v:if="!post.featured_media"><p>no image</p></div>
        </li>
      </ul>
    </div>
</div>

// JS 

var app = new Vue({
      el: '#app',          
      data: {
        siteUrl:'http://localhost:3000/',
        posts:[]
      },
      created: function () {
        this.listFiles();
      },


      methods: {

        listFiles: function() {

          var myUrl = "/wp-json/wp/v2/posts";
          var xhr = new XMLHttpRequest()
          var self = this
          xhr.open('GET', myUrl)
          xhr.onload = function () {
            self.posts = JSON.parse(xhr.responseText);
          }
          xhr.send()
        }
      }

    });

这是一篇帖子中的json：

{
"id":176,
"date":"2016-12-14T23:56:09",
"date_gmt":"2016-12-14T22:56:09",
"guid":{
    "rendered":"http://site.dev/2016/12/14/qui-harum-consequatur-veritatis/"
},
"modified":"2016-12-14T23:56:09",
"modified_gmt":"2016-12-14T22:56:09",
"slug":"qui-harum-consequatur-veritatis",
"type":"post",
"link":"http://site.dev/2016/12/14/qui-harum-consequatur-veritatis/",
"title":{
    "rendered":"Qui harum consequatur veritatis"
},
"content":{
    "rendered":"<p>Quae alias repellendus dolores cupiditate repellat ad. Error voluptatem soluta voluptatem labore repellat. Quos in quia eveniet.</p>\n<p>Repellendus iure voluptatibus aut sit sunt et id. Quia consequatur sed consequatur eum blanditiis nihil natus. Sapiente ut ut qui voluptatem quod recusandae ut. Minus aut enim et quod.</p>\n<p>Harum est unde dicta ad. Eius quia vero aut. Aliquid tempore perspiciatis repellat ratione itaque repudiandae beatae. In et ut perspiciatis.</p>\n<p>Veniam voluptatibus velit recusandae quas. Non eveniet tenetur adipisci assumenda quia. Aut eos optio alias.</p>\n<p>Et ratione eum iure hic ipsam. Dolorem suscipit delectus nisi id sed non in. Voluptatem eos molestiae numquam beatae reiciendis eaque labore.</p>\n",
    "protected":false
},
"excerpt":{
    "rendered":"<p>Quae alias repellendus dolores cupiditate repellat ad. Error voluptatem soluta voluptatem labore repellat. Quos in quia eveniet. Repellendus iure voluptatibus aut sit sunt et id. Quia consequatur sed consequatur eum blanditiis nihil natus. Sapiente ut ut qui voluptatem quod recusandae ut. Minus aut enim et quod. Harum est unde dicta ad. Eius quia vero aut. &hellip; <a href=\"http://site.dev/2016/12/14/qui-harum-consequatur-veritatis/\">Continued</a></p>\n",
    "protected":false
},
"author":1,
"featured_media":177,
"comment_status":"open",
"ping_status":"open",
"sticky":false,
"template":"",
"format":"standard",
"meta":[

],
"categories":[
    1
],
"tags":[

],
"featuredImageUrl":{
    "id":177,
    "alt_text":"",
    "caption":"",
    "description":"",
    "media_type":"image",
    "media_details":{
        "width":1263,
        "height":842,
        "file":"2016/12/d63dd99a-1c39-32e1-935e-4fb32352ddba.jpg",
        "sizes":{
            "thumbnail":{
                "file":"d63dd99a-1c39-32e1-935e-4fb32352ddba-150x150.jpg",
                "width":150,
                "height":150,
                "mime-type":"image/jpeg",
                "source_url":"http://site.dev/app/uploads/2016/12/d63dd99a-1c39-32e1-935e-4fb32352ddba-150x150.jpg"
            },
            "medium":{
                "file":"d63dd99a-1c39-32e1-935e-4fb32352ddba-300x200.jpg",
                "width":300,
                "height":200,
                "mime-type":"image/jpeg",
                "source_url":"http://site.dev/app/uploads/2016/12/d63dd99a-1c39-32e1-935e-4fb32352ddba-300x200.jpg"
            },
            "medium_large":{
                "file":"d63dd99a-1c39-32e1-935e-4fb32352ddba-768x512.jpg",
                "width":768,
                "height":512,
                "mime-type":"image/jpeg",
                "source_url":"http://site.dev/app/uploads/2016/12/d63dd99a-1c39-32e1-935e-4fb32352ddba-768x512.jpg"
            },
            "large":{
                "file":"d63dd99a-1c39-32e1-935e-4fb32352ddba-1024x683.jpg",
                "width":1024,
                "height":683,
                "mime-type":"image/jpeg",
                "source_url":"http://site.dev/app/uploads/2016/12/d63dd99a-1c39-32e1-935e-4fb32352ddba-1024x683.jpg"
            },
            "custom-thumbnail":{
                "file":"d63dd99a-1c39-32e1-935e-4fb32352ddba-220x147.jpg",
                "width":220,
                "height":147,
                "mime-type":"image/jpeg",
                "source_url":"http://site.dev/app/uploads/2016/12/d63dd99a-1c39-32e1-935e-4fb32352ddba-220x147.jpg"
            },
            "custom-thumbnail-hd":{
                "file":"d63dd99a-1c39-32e1-935e-4fb32352ddba-270x180.jpg",
                "width":270,
                "height":180,
                "mime-type":"image/jpeg",
                "source_url":"http://site.dev/app/uploads/2016/12/d63dd99a-1c39-32e1-935e-4fb32352ddba-270x180.jpg"
            },
            "custom-thumbnail-wide":{
                "file":"d63dd99a-1c39-32e1-935e-4fb32352ddba-444x296.jpg",
                "width":444,
                "height":296,
                "mime-type":"image/jpeg",
                "source_url":"http://site.dev/app/uploads/2016/12/d63dd99a-1c39-32e1-935e-4fb32352ddba-444x296.jpg"
            }
        },
        "image_meta":{
            "aperture":"0",
            "credit":"",
            "camera":"",
            "caption":"",
            "created_timestamp":"0",
            "copyright":"",
            "focal_length":"0",
            "iso":"0",
            "shutter_speed":"0",
            "title":"",
            "orientation":"0",
            "keywords":[

            ]
        }
    },
    "post":176,
    "source_url":"http://site.dev/app/uploads/2016/12/d63dd99a-1c39-32e1-935e-4fb32352ddba.jpg"
},
"_links":{
    "self":[
        {
            "href":"http://site.dev/wp-json/wp/v2/posts/176"
        }
    ],
    "collection":[
        {
            "href":"http://site.dev/wp-json/wp/v2/posts"
        }
    ],
    "about":[
        {
            "href":"http://site.dev/wp-json/wp/v2/types/post"
        }
    ],
    "author":[
        {
            "embeddable":true,
            "href":"http://site.dev/wp-json/wp/v2/users/1"
        }
    ],
    "replies":[
        {
            "embeddable":true,
            "href":"http://site.dev/wp-json/wp/v2/comments?post=176"
        }
    ],
    "version-history":[
        {
            "href":"http://site.dev/wp-json/wp/v2/posts/176/revisions"
        }
    ],
    "wp:featuredmedia":[
        {
            "embeddable":true,
            "href":"http://site.dev/wp-json/wp/v2/media/177"
        }
    ],
    "wp:attachment":[
        {
            "href":"http://site.dev/wp-json/wp/v2/media?parent=176"
        }
    ],
    "wp:term":[
        {
            "taxonomy":"category",
            "embeddable":true,
            "href":"http://site.dev/wp-json/wp/v2/categories?post=176"
        },
        {
            "taxonomy":"post_tag",
            "embeddable":true,
            "href":"http://site.dev/wp-json/wp/v2/tags?post=176"
        }
    ],
    "curies":[
        {
            "name":"wp",
            "href":"https://api.w.org/{rel}",
            "templated":true
        }
    ]
}
}

如何将这些对象作为vue模型的一部分？

1 个答案:

答案 0 :(得分：0)

这是一个错字：

<div v:if="post.featured_media">

应该是：

<div v-if="post.featured_media">
相关问题
最新问题