1

I've run into a little issue with rendering posts from the Wordpress API using Vue.js.

I fetch posts from the Wordpress API with a created() get request - and then the template I am attempting to display the whole post as a card:

<div v-if="posts">
  <div class="row p-0 m-0" v-for="post of posts" v-bind:key="post.id">
    <div class="card mb-2 w-100" v-if="post.status === 'publish'" >
      <img v-if="post.featured_media != 0" class="card-img-top" v-bind:src="post.wp:featuredmedia.media_deatils.sizes.large.source_url" alt="">
      <div class="card-body p-3">
        <h5 class="card-title text-uppercase text-left" style="font-weight: 800; font-size: 0.9rem; letter-spacing: 2px;">{{ post.title.rendered | parseAmpersand }}</h5>
        <p class="card-text"><small>{{ post.modified_gmt | moment("dddd, MMMM Do YYYY") }}</small></p>
        <div v-html="post.excerpt.rendered"></div>
      </div>
    </div>
  </div>
</div>

With my img tag I'm attempting to bind the Getter & Setter for post.wp:featuredmedia.media_deatils.sizes.large.source_url to the src attribute on the img element.

However, it does not like the : in post.wp:featuredmedia.media_deatils.sizes.large.source_url ... how to I negotiate my way around this issue?

  • 1
    you would need to use `post['wp:featuredmedia'].media_deatils.sizes.large.source_url` – Derek Pollard Aug 13 '18 at 15:10
  • Possible duplicate of [Selecting a JSON object with a colon in the key](https://stackoverflow.com/questions/4925760/selecting-a-json-object-with-a-colon-in-the-key) – thanksd Aug 13 '18 at 15:17

0 Answers0