After receiving the data, the path to the required looks like this:

{{list._links.wp:featuremedia[0].href}}

But, Vue.js does not understand " : ".

How can this be fixed?

enter image description here

  • Show me how you get the data. - Kvilios 2:29 pm
  • {{list.title.rendered}} works. Here is such a div <div v-for="list in lists" v-bind:key="list.id"> Error Unexpected token : - Slava Pavlov
  • ok, list._links.wp suppose it contains some data, why are you doing this here :featuremedia[0].href ? If you just want to display ЗНАЧЕНИЕ : ЗНАЧЕНИЕ , this is done like this: {{list._links.wp}}:{{featuremedia[0].href}} or like this: {{`${list._links.wp}:${featuremedia[0].href}`}} - Kvilios
  • I need to get href from there. Above the picture hung. - Slava Pavlov
  • then: {{ list._links["wp:featuremedia"][0].href }} - Kvilios 2:41 pm

1 answer 1

In addition to the comments above ... Try this:

 const app = new Vue({ el: '#app', data() { return { lists: [{ title: 'title 1' }, { title: 'title 2' }] } }, methods: { getHref(list) { return (list && list.hasOwnProperty('wp:featuremedia')) ? list['wp:featuremedia'][0].href : 'Loading...'; } }, created() { setTimeout(() => { this.lists = this.lists.map((el) => { return { ...el, 'wp:featuremedia': [{ href: 'link 1' }, { href: 'link 2' }, { href: 'link 3' }] } }); }, 2000) } }) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <ul> <li v-for="list in lists"> <h3>{{list.title}}</h3> <p>First link: {{ getHref(list) }}</p> </li> </ul> </div>

It uses boot simulation via setTimeout . By default, lists have no wp:featuremedia , we load it, and then, using the getHref method (which receives one of the lists elements as input), we get the value of the link (if the list && list.hasOwnProperty('wp:featuremedia') complied with). Otherwise, write " Loading ... ".