【问题标题】:vue-material's md-table slot-scope rendering fails with beta8vue-material 的 md-table slot-scope 渲染在 beta8 中失败
【发布时间】:2018-04-02 14:00:36
【问题描述】:

我有这支笔来演示我的问题。

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")

第一个表格根本不会渲染,但第二个表格渲染得很好。任何的想法?什么可能导致麻烦?我试图删除任何可能破坏它的东西。非常感谢您的帮助。

【问题讨论】:

    标签: javascript vue-material


    【解决方案1】:

    问题是“条目”应该是一个数组而不是一个对象。并且 slot-scope 必须是 { item }。

    被vue-material的优秀开发者指正!

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-09-11
      • 2017-01-06
      • 2017-10-15
      • 1970-01-01
      • 1970-01-01
      • 2018-05-26
      • 2018-01-12
      • 2019-03-07
      相关资源
      最近更新 更多