Question

我正在尝试对一组对象进行for循环，但是由于它们的名称不同，所以我陷入了困境。

<div id="components-demo">
    <div>Travel Information</div>
    <ul>
        <li 
          v-for="(todo, index) in todos"
          v-bind:id="index"
          v-bind:title="todo"
            >{{todo}}</li>
    </ul>
</div>


var newData = @Html.Raw(Json.Encode(Model));
// Object returns like { Passenger: "Tom Jones", Airline: "United Airways", Destination: "Atlanta, GA", etc. }    

var vm = new Vue({
    el: '#components-demo',
    data: {
        todos: [
            { newData }
        ]
    }
})

在Vue的开发人员工具中，它很好地列出了对象，例如：

todos: Array [1]
   0: Object
     Passenger: "Tom Jones"
     Airline: "United Airways"
     Destination: "Atlanta, GA"
     etc.

最后，我想列出包含这些项目的li，但除非我确切指定每个项目，否则似乎无法遍历。

Answer 1

根据您说的对象构造而成。

<div id="components-demo">
    <div>Travel Information</div>
    <ul>
        <li v-for="(item, index) in todos" :key="index">{{ item.Passenger }}</li>
    </ul>
</div>

要使用嵌套循环列出动态对象：

<div id="components-demo">
    <div>Travel Information</div>
    <ul>
        <li v-for="(item, index) in todos" :key="index">
          <ul>
             <li v-for="(value, key) in item" :key="key">{{ key }} : {{ value }}</li>
          </ul>
        </li>
    </ul>
</div>

Answer 2

您正在将对象分配给数组，您可以直接https://jsfiddle.net/cckLd9te/4656/直接遍历对象

data: {
    todos: newData 
  },

对于对象循环

2 个答案: