Question

我最近使用vuejs框架创建了一个普通表。结果是没有功能的表。我的数据来自生成虚假json数据的网站。这是https://jsbin.com/retoqej/edit?html,css,output中的工作版本

        <table border=1>
            <tr>
                <th>Name</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Phone</th>
            </tr>
            <tr v-for="user in users">
                <td>{{user.name}}</td>
                <td>{{user.username}}</td>
                <td>{{user.email}}</td>
                <td>{{user.phone}}</td>
            </tr>

        </table>
    </div>

    <script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                users: []
            },
            created: function () {
                this.getListData();
            },
            methods: {
                getListData: function () {
                    var root = 'https://jsonplaceholder.typicode.com';
                    var vm = this;

                    $.ajax({
                        url: root + '/users',
                        method: 'GET'
                    }).then(function (data) {
                        vm.users = data;
                    });                                            

                },
                generateData: function (d) {
                    //this.data = d;
                    //alert("generateData");
                }
            }
        });     
    </script>


</body>

我接下来要做的是通过使其可排序，可搜索等来添加功能。经过一些研究，我遇到了vuetify并尝试创建一个类似于此示例https://vuetifyjs.com/en/components/data-tables的表，但没有任何反应。我甚至没有收到错误。我的JSON数据没有像他们拥有的示例那样硬编码到页面中。我的JSON来自一个生成虚假json数据的网站。这是我的codepen代码https://codepen.io/anon/pen/XZzvax?editors=1010

HTML

    <div id="app">
            <template>
                <v-data-table
                    v-bind:headers="headers"
                    :items="items"
                    hide-actions
                    class="elevation-1"
                  >
                  <template slot="items" slot-scope="props">
                    <td>{{ props.item.name }}</td>
                    <td class="text-xs-right">{{ props.item.username }}</td>
                    <td class="text-xs-right">{{ props.item.email }}</td>
                    <td class="text-xs-right">{{ props.item.phone }}</td>
                  </template>
                </v-data-table>
            </template>  

    </div>

的JavaScript

new Vue({
el: '#app',
data () {
return {
  headers: [
    {
      text:'Name',
      align: 'left',
      sortable: false,
      value:'name'
    },
    { text: 'First Name', value: 'username' },
    { text: 'Email', value: 'email' },
    { text: 'Phone', value: 'phone' }
  ],
  items: [],
  methods: {
                getListData: function () {
                    var root = 'https://jsonplaceholder.typicode.com';
                    var vm = this;

                    $.ajax({
                        url: root + '/users',
                        method: 'GET'
                    }).then(function (data) {
                        vm.items = data;
                    });                                            

                }
  }
}      
}
})

Answer 1

这里的问题是你从未打电话给getListData。一旦你这样做，就会进行AJAX调用。这是您的代码的更新版本。

new Vue({
  el: '#app',
  created(){
    this.getListData()
  },
  methods: {
    getListData: function () {
      var root = 'https://jsonplaceholder.typicode.com';
      var vm = this;

      $.ajax({
        url: root + '/users',
        method: 'GET'
      }).then(function (data) {
        vm.items = data;
      });                                            

    }
  },
  data () {
    return {
      headers: [
        {
          text:'Name',
          align: 'left',
          sortable: false,
          value:'name'
        },
        { text: 'First Name', value: 'username' },
        { text: 'Email', value: 'email' },
        { text: 'Phone', value: 'phone' }
      ],
      items: []
    }
  }
})

请注意调用created的已添加getListData生命周期处理程序。我还修改了getListData以设置items。

这是你的笔updated。

如何对动态生成的vue表进行vuetify？

1 个答案: