Question

我在vue js中非常新，我用它来显示表中的一些数据，它工作正常，但是...它显示结果上的属性名称，你能帮我验证吗？

Admin.html

window.onload = function () {
        Vue.component('todo-item', {
            props: ['todo']
        });

        var app1 = new Vue({
            el: '#app-1',
            data: {
                //default row to avoid errors
                theUserList: [
                    { id: 0, email: 'EMAIL', username: 'USER NAME', status: 'STATUS', gender: 'GENDER', registrationdate: 'REGISTRATION DATE', theurl: 'MODIFY' }
                ],
                currentPage:0
            },
            methods: {
                addData: function () {
                    if (rawData && rawData != undefined && rawData != null) {
                        for (y = 0; y < rawData.length; y++) {
                            this.theUserList.push({ id: rawData[y][0], email: rawData[y][1], username: rawData[y][2], status: rawData[y][3], gender: rawData[y][4], registrationdate: rawData[y][5], theurl: rawData[y][6] });
                        }
                        this.theUserList.splice(0, 1);
                    }
                }
            }
        });
        app1.addData();
    }
<div id="app-1">
            <table class="responsive-card-table unstriped">
                <tr><th>Email</th><th>User Name</th><th>Status</th><th>Gender</th><th>Registration Date</th><th>Modify</th></tr>
                <tr v-for="item in theUserList"
                    v-bind:class="{'':true, 'page-item-active':(item.id === currentPage)}"
                    v-bind:tr="item"
                    v-bind:key="item.id">
                    <td>{{ item.email.email}}</td><td>{{item.username}} </td><td>{{ item.status }}</td><td>{{ item.gender}} </td><td> {{item.registrationdate }} </td><td>{{ item.theurl }}</td></tr>
            </table>
        </div>

输出：

//TH

**Email User Name   Status  Gender  Registration Date   Modify Url**

//ROWS

*email:* admin@admin.com *username:* admin  *status:* True  *gender:* True  *registrationdate:* 7-5-2018    *theurl:* theurl

Answer 1

如果您想使用rawData中的数据，无论它来自何处（道具，数据或计算属性），您都需要绑定this以在Vue实例中使用它。

要在创建Vue实例时使用addData方法显示数据，您可以在created或mounted挂钩内返回该方法（取决于加载数据的时间）

示例：

new Vue({
  el: "#app",
  data: {
    rawData: [
      [1, "john@test.com", "John", "false", "male", "28/02/2018", "http://example.com"],
      [2, "jane@test.com", "Jane", "true", "female", "19/02/2018", "http://example.com"]
    ],
    theUserList: [
      { id: 0, email: 'EMAIL', username: 'USER NAME', status: 'STATUS', gender: 'GENDER', registrationdate: 'REGISTRATION DATE', theurl: 'MODIFY' }
    ],
    currentPage:0
  },
  methods: {
    addData: function () {
      for (let y in this.rawData) {
        this.theUserList.push({ id: this.rawData[y][0], email: this.rawData[y][1], username: this.rawData[y][2], status: this.rawData[y][3], gender: this.rawData[y][4], registrationdate: this.rawData[y][5], theurl: this.rawData[y][6] });
      }
      this.theUserList.splice(0, 1);
    }
  },
  mounted() {
    return this.addData()
  }
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <table class="table">
    <thead>
      <tr><th>Email</th><th>User Name</th><th>Status</th><th>Gender</th><th>Registration Date</th><th>Modify</th></tr>
    </thead>

    <tbody>
      <tr v-for="item in theUserList" :key="item.id">
        <td>{{ item.email}}</td>
        <td>{{item.username}} </td>
        <td>{{ item.status }}</td>
        <td>{{ item.gender}} </td>
        <td> {{item.registrationdate }} </td>
        <td>{{ item.theurl }}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

有人发布了网址

https://jsfiddle.net/1L00jj8z/

基于此，我将代码修改为： JS

var vueApp = new Vue({
                el: "#app",
                data() {
                    return {
                        theUserList: [],
                    }
                },
                created() {
                    this.addUser();
                },

                methods: {
                    addUser() {
                        return this.theUserList.push({
                            id: + new Date,
                            email: '',
                            username: '',
                            status: '',
                            gender: '',
                            registrationdate: '',
                            theurl: ''
                        });
                    },
                    addRawUsers() {
                         if (rawData && rawData != undefined && rawData != null) {
                            for (y = 0; y < rawData.length; y++) {
                                this.theUserList.push({
                            id: '' + rawData[y][0],
                            email: '' + rawData[y][1],
                            username: '' + rawData[y][2],
                            status: '' + rawData[y][3],
                            gender: '' + rawData[y][4],
                            registrationdate: '' + rawData[y][5],
                            theurl: '' + rawData[y][6]
                            });
                             }
                             this.theUserList.splice(0, 1);
                        }
                    },
                    deleteUser(item) {
                        this.theUserList = this.theUserList.filter(user => user.id !== item.id)
                    }
                }
            });
        vueApp.addRawUsers();
}

HTML

   <div id="app">
        <table class="responsive-card-table unstriped">
            <tr>
                <th>Email</th>
                <th>User Name</th>
                <th>Status</th>
                <th>Gender</th>
                <th>Registration Date</th>
                <th>URL</th>
                <th></th>
            </tr>
            <tr v-for="item in theUserList" :key="item.id">
                <td><input type="text" class="input" v-model="item.email" /></td>
                <td><input type="text" class="input" v-model="item.username" /> </td>
                <td><input type="text" class="input" v-model="item.status" /></td>
                <td><input type="text" class="input" v-model="item.gender" /> </td>
                <td><input type="text" class="input" v-model="item.registrationdate" /> </td>
                <td><input type="text" class="input" v-model="item.theurl" /></td>
                <td><div v-on:click="deleteUser(item)">x</div></td>
            </tr>
        </table>

谢谢大家！

vue js显示属性名称

2 个答案: