Question

我正在尝试使用vue.js构建一个简单的列表。问题是我没有看到使用v-for指令呈现给DOM的对象值。

这是代码：

我正在使用材质设计进行布局

    <template>
      <div id = "app">

        <md-card>

          <md-card-header>

            <div class = "md-title">levi is the inner eye</div>
            <div class = "md-subhead">levi Material</div>

          </md-card-header>

          <md-card-content>

            <md-button class = "md-raised md-primary" v-on:click = "fillTable()">Fill table</md-button>
        <md-button class = "md-raised md-primary" v-on:click = "clearTable()">empty table</md-button>

            <br />

             <md-table>

              <md-table-header>

                <md-table-row>

                  <md-table-head>First name</md-table-head>
                  <md-table-head>Last name</md-table-head>
                  <md-table-head>Email</md-table-head>

                </md-table-row>

              </md-table-header>

              <md-table-body>

                <md-table-row v-for = "contact in contacts" v-bind:data = "contact" v-bind:key = "contact.firstname">

                  <md-table-cell>{{ contact.firstname }}</md-table-cell>
                  <md-table-cell>{{ contact.lastname }}</md-table-cell>
                  <md-table-cell>{{ contact.email }}</md-table-cell>

                </md-table-row>

              </md-table-body>

            </md-table>


          </md-card-content>
        </md-card>
      </div>
</template>

脚本元素

<script>


export default {
  name: 'app',

    data: function() {

    return {

        contacts: []

        }

    },

    methods: {

        fillTable: function() {

    this.contacts.push({firstname: 'Sebastian', lastname: 'Escheiler', email: 's.eschweiler@mail.com'});

        this.contacts.push({firstname: 'Bill', lastname: 'Smith', email: 'b.smith@mail.com'});

        this.contacts.push({firstname: 'Ann', lastname: 'Parker', email: 'a.parker@mail.com'});

        },

        clearTable: function() {

            this.contacts.splice(0, this.contacts.length);
        }
    }

}


</script>

样式元素

<style>

#app {
  font-family:'Heiti SC';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 40px;
}

</style>

Answer 1

这实际上似乎有效：https://codepen.io/aprouja1/pen/rwvYyV

在Codepen中只有改变的是创建Vue实例并选择#app元素。

Vue.use(VueMaterial)

const app = new Vue( {
  name: "app",
  el:"#app",
  data: function() {
    return {
      contacts: []
    }
  },
  methods: {
    fillTable: function() {
      this.contacts.push({
        firstname: "Sebastian",
        lastname: "Escheiler",
        email: "s.eschweiler@mail.com"
      });

      this.contacts.push({
        firstname: "Bill",
        lastname: "Smith",
        email: "b.smith@mail.com"
      });

      this.contacts.push({
        firstname: "Ann",
        lastname: "Parker",
        email: "a.parker@mail.com"
      });
    },

    clearTable: function() {
      this.contacts.splice(0, this.contacts.length);
    }
  }
});

我使用点表示法来访问我被推送到列表的对象值，但它不起作用。为什么？

1 个答案: