客户

Question

我正在使用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记录到控制台会显示它确实包含数据，但由于原因它不会呈现。这是为什么？我做错了什么？

Answer 1

这是您的代码片段，按预期工作。我已经在你提到的库中添加了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>

Answer 2

以下是我<head>的完整输出，其中<table>位于<body>内，所有脚本位于底部，就像我在实时代码中一样。顾客

客户

                        <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>
                    </div>
                </div>
            </div>
        </main>
        <script type="text/javascript" src="/static/js/customer_list.js"></script>
    </body>
</html>

Answer 3

现在似乎正在发挥作用。在app.js里面，我有理由const app = new Vue({ el: 'body' }) 由于某些原因，我在customer_list.js中创建了一个与之相冲突的问题，尽管我的方法运行正常。

Vue.js For循环不呈现内容

3 个答案:

客户