我用这支笔证明了我的问题。
https://codepen.io/sfyrious/pen/zWarZa
对我来说,vue-material上的1.0.0-beta-8看起来是坏的。
<div id="app">
<md-table v-model="entries" md-card>
<md-table-head>This table does not render.</md-table-head>
<md-table-row slot="md-table-row" slot-scope="{ entry }" :key="entry.uid">
<md-table-cell md-label="UID" md-sort-by="uid" md-numeric>{{ entry.uid }}</md-table-cell>
<md-table-cell md-label="Name" md-sort-by="name">{{ entry.name }}</md-table-cell>
<md-table-cell md-label="Alive?" md-sort-by="alive">{{ entry.alive }}</md-table-cell>
</md-table-row>
</md-table>
<md-table md-card>
<md-table-head>This table renders fine</md-table-head>
<md-table-row v-for="entry in entries" :key="entry.uid">
<md-table-cell md-label="UID">{{ entry.uid }}</md-table-cell>
<md-table-cell md-label="Name">{{ entry.name }}</md-table-cell>
<md-table-cell md-label="Alive?">{{ entry.alive }}</md-table-cell>
</md-table-row>
</md-table>
</div>--单独的js文件
Vue.use(VueMaterial.default)
var myapp = {
name: "myApplication",
data: function data() {
return {
entries: {
0 : {
"uid" : 1,
"name" : "Bill",
"alive" : true
},
1 : {
"uid" : 2,
"name" : "Bob",
"alive" : true
},
2 : {
"uid" : 3,
"name" : "Sally",
"alive" : false
}
}
}
}
}
var app = new Vue(myapp)
app.$mount("#app")第一个表根本不会呈现,但第二个表呈现得很好。有什么想法吗?可能是什么原因造成了问题?我试着删除任何可能破坏它的东西。如果能帮上忙,我们将不胜感激。
发布于 2018-04-03 03:02:02
问题是“条目”应该是一个数组而不是一个对象。而slot-scope必须是{ item }。
我被vue-material的优秀开发者纠正了!
https://stackoverflow.com/questions/49612743
复制相似问题