[Fixed]-Vue.js For loop is not rendering content

1👍

Here’s a snippet of your code, which works as expected. I’ve added in CDN references to the libraries you mentioned, but I’m not doing anything with them. I offer this as a starting point for you to see if you can find what changes will reproduce your problem here.

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>

0👍

It seems now to be working.
Inside app.js I had:

const app = new Vue({ el: 'body' })

That, for some reason, conflicted with the one I was creating inside customer_list.js—although my methods worked fine.

Leave a comment