我正在使用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 记录到控制台显示它实际上确实包含数据，但由于原因它不会呈现 . 这是为什么？我究竟做错了什么？
3 回答
这是您的代码片段，按预期工作 . 我已经在你提到的库中添加了CDN引用，但是我没有对它们做任何事情 . 我提供此作为您的起点，看看您是否可以找到哪些更改将在此处重现您的问题 .
这是
<head>的完整输出，<body>内有<table>，底部的所有脚本都在实时代码中 . 顾客客户
现在似乎正在发挥作用 . 在app.js里面，我有理由
const app = new Vue({ el: 'body' })由于某种原因，我在customer_list.js中创建的那个与之相冲突，尽管我的方法运行正常 .