Vue.js For 循环不呈现内容答案

【问题标题】：Vue.js For loop is not rendering contentVue.js For 循环不呈现内容
【发布时间】：2017-01-02 04:19:35
【问题描述】：

我正在使用 vue.js、vue-resource、vue-mdl 和 google material design lite 构建一个 Web 应用程序。 JS 编译是通过 laravel elixir 使用 webpack 进行的。在这个应用程序中，我必须为从 Rest API（Django Rest Framework）返回的数组中的每个对象呈现一个表格行。我在 html 中编写了以下代码来使用 vue.js 呈现内容：

<tr v-for="customer in customers">
    <td class="mdl-data-table__cell--non-numeric">{{ customer.status }}</td>
    <td class="mdl-data-table__cell--non-numeric">{{ customer.name }}</td>
    <td class="mdl-data-table__cell--non-numeric">{{ customer.company }}</td>
<tr>

这应该将数组中的所有对象呈现为表格行。我还尝试将上述内容包装在这样的模板标签中：

<template v-for="customer in customers">
<tr>
    <td class="mdl-data-table__cell--non-numeric">{{ customer.status }}</td>
    <td class="mdl-data-table__cell--non-numeric">{{ customer.name }}</td>
    <td class="mdl-data-table__cell--non-numeric">{{ customer.company }}</td>
</tr>
</template>

这也没有改变。我也尝试在 vue 实例的 ready() 函数中对数组进行硬编码，但这也无济于事。

window._ = require('lodash');
require('material-design-lite');
window.Vue = require('vue');
require('vue-resource');
var VueMdl = require('vue-mdl');
Vue.use(VueMdl.default);
const app = new Vue({
    el:'body',
    ready: function(){
        //this.getCustomerList();
        this.customers = [
            { name: "Peter", status: "true", company: "Company 1"},
            { name: "John", status: "false", company: "Company 2"}
        ]

    },
    data: {
        customers: [],
        response: null,
        messages: []
    },
    methods: {
        getCustomerList: function()
        {
            this.$http({url: '/api/customers/', method: 'GET'}).then(function(response){
                //Success
                this.customers = response.data
                console.log(response.data)
            },
            function(response){
                console.log(response)
            })
        }
    }
})

将上述更改为此也不会改变：

window._ = require('lodash');
require('material-design-lite');
window.Vue = require('vue');
require('vue-resource');
var VueMdl = require('vue-mdl');
Vue.use(VueMdl.default);
const app = new Vue({
    el:'body',
    ready: function(){
        //this.getCustomerList();

    },
    data: {
        customers: [
            { name: "Peter", status: "true", company: "Company 1"},
            { name: "John", status: "false", company: "Company 2"}
        ],
        response: null,
        messages: []
    },
    methods: {
        getCustomerList: function()
        {
            this.$http({url: '/api/customers/', method: 'GET'}).then(function(response){
                //Success
                this.customers = response.data
                console.log(response.data)
            },
            function(response){
                console.log(response)
            })
        }
    }
})

我还尝试制作一个没有应用任何 Google MDL 类的普通 html 表，这也没有给出任何结果。将this.customers 记录到控制台表明它确实包含数据，但由于某种原因它没有呈现。这是为什么？我做错了什么？

【问题讨论】：

控制台有错误吗？是否有 <table> 标签包裹着您的 <tr> 组？
控制台中没有任何内容，当然它被包裹在 <table> 和 <tbody> 中。

标签： django vue.js material-design-lite vue-resource

【解决方案1】：

这是您的代码的 sn-p，它按预期工作。我在 CDN 中添加了对您提到的库的引用，但我没有对它们做任何事情。我将此作为起点，让您看看是否可以在这里找到哪些更改会重现您的问题。

const app = new Vue({
  el: 'body',
  ready: function() {
    //this.getCustomerList();
    this.customers = [{
      name: "Peter",
      status: "true",
      company: "Company 1"
    }, {
      name: "John",
      status: "false",
      company: "Company 2"
    }]
  },
  data: {
    customers: [],
    response: null,
    messages: []
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-resource/0.9.3/vue-resource.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<script src="https://rawgit.com/posva/vue-mdl/develop/dist/vue-mdl.min.js"></script>
<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--3-col">
    <button id="create-customer" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" @click="$refs.createCustomer.open">
      Create customer
    </button>
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    <button id="convert-reseller" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
      Convert to reseller
    </button>
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    <button id="remove-customer" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
      Remove Customer
    </button>
  </div>
  <div class="mdl-cell mdl-cell--3-col">
    <button id="change-status" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
      Change status
    </button>
  </div>
</div>
<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--12-col">
    <table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable" style="width:100%;">
      <thead>
        <tr>
          <th class="mdl-data-table__cell--non-numeric">Status</th>
          <th class="mdl-data-table__cell--non-numeric">Customer name</th>
          <th class="mdl-data-table__cell--non-numeric">Company</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="customer in customers">
          <td class="mdl-data-table__cell--non-numeric">{{ customer.status }}</td>
          <td class="mdl-data-table__cell--non-numeric">{{ customer.name }}</td>
          <td class="mdl-data-table__cell--non-numeric">{{ customer.company }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

【讨论】：

【解决方案2】：

现在似乎可以正常工作了。在app.js 里面我有：

const app = new Vue({ el: 'body' })

由于某种原因，这与我在 customer_list.js 中创建的内容相冲突——尽管我的方法运行良好。

【讨论】：