can't display array inside of html using vuejs v-for

Question

I am returning back an array of object to render all on the screen. I am making a Ajax request to get a bunch of titles. Right now I can only manage to make it bring back one by writing vm.CourseTitle=data.d.results[0].Title; Instead, I want it to return all, I have tried vm.CourseTitle=data.d.results.Title; but that breaks it. How do I need to format the vuecode to make this display all the titles? In theory, this would be enclosed within a return{}. No idea why I can't get this to work!

new Vue({
  el: "#app",
  
  data: {
 CourseTitle: [{ "Title":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
    { "Title":"BMW", "models":[ "320", "X3", "X5" ] },
    { "Title":"Fiat", "models":[ "500", "Panda" ] }

  ],
  }
  
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>

<li v-for="course in CourseTitle"></li>
 {{CourseTitle}}

</div>

Bhojendra Rauniyar · Accepted Answer · 2019-07-20 16:20:46Z

2

You're not correctly manipulating html. It should be:

<li v-for="course in CourseTitle">{{course.Title}}</li>

Further, li tag should be wrapped with ul tag.

answered Jul 20, 2019 at 16:20

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

can't display array inside of html using vuejs v-for

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related