vue.js - 无法使用 vuejs v-for 在 html 中显示数组

Question

我正在返回一个对象数组以在屏幕上呈现所有内容。我正在发出 Ajax 请求以获取一堆标题。现在我只能通过编写 vm.CourseTitle=data.d.results[0].Title; 来使它恢复原状。相反，我希望它全部返回，我尝试过 vm.CourseTitle=data.d.results.Title; 但这打破了它。我需要如何格式化 vuecode 以使其显示所有标题？理论上，这将包含在 return{} 中。不知道为什么我不能让它工作！

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>

标签： vue.js

Answer 1

您没有正确操作 html。它应该是：

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

此外， li 标签应该用 ul 标签包裹。