Question

v-for遍历我的字段而不是我选择的数据，例如，我的数据库中有3个字段（名称，电子邮件，用户名），它将循环3次

Profile.vue

<template>
    <div>
        <h3>Profile</h3>
        <user-profile v-for="user in users" :user="user" :key="user.id"></user-profile>
    </div>
</template>

<script>
    import UserProfile from '../partials/UserProfile.vue'
    import User from '../models/User'
    import Form from '../core/Form'

    export default {
        components: {
            UserProfile
        },
        data() {
            return {
                users: [
                    users:[],
                ],
            }
        },
        created() {
            axios.get('/user/profile').then(res => this.users = res);
        }
    };
</script>

UserProfile.vue

<template>
    <div class="row">
        <form class="col s12" method="POST" @submit.prevent="onSubmit">
            <div class="input-field col s12">
                <input type="text" id="name" name="name" v-model="form.name" class="validate" autofocus>
                <label for="name" class="active">Name</label>
            </div>
            <div class="input-field col s12">
                <input id="email" type="email" name="email" v-model="form.email" class="validate" autofocus>
                <label for="email" class="active">Email</label>
            </div>

            <div class="right-align">
                <button class="btn waves-effect waves-light" type="submit" name="action">Update
                    <i class="material-icons right">send</i>
                </button>
            </div>
        </form>
    </div>
</template>
<script>
    import Form from '../core/Form'

    export default {
        props: ['user'],
        data() {
            return {
                form: new Form({
                    name: this.user.name,
                })
            }
        },
        computed: {
            //
        },
        mounted() {

        },
        methods: {
            //
            onSubmit() {
                axios.post('/user/update', {
                    name: this.user.name
                })
                    .then(console.log('yeahh'))
                    .catch(console.log('failed'))
            }
        }

    };
</script>

Answer 1

您的users数据内部看起来不对。这是经过编辑的版本

个人资料

<script>
  import UserProfile from '../partials/UserProfile.vue'
  import User from '../models/User'
  import Form from '../core/Form'

  export default {
      components: {
        UserProfile
      },
      data() {
        return {
            users: [ 
              {
                name: 'FirstName LastName',
                email: 'firstname.lastname@gmail.com'
              }
            ],
        }
      },
      created() {
        // User.all(users => this.users = users)
      }
  };
</script>

Answer 2

由于您只返回当前登录的用户，因此您必须对Profile组件进行一些编辑：

<template>
    <div>
        <h3>Profile</h3>
        <user-profile :user="user" :key="user.id"></user-profile>
    </div>
</template>

<script>
    import UserProfile from '../partials/UserProfile.vue'
    import User from '../models/User'
    import Form from '../core/Form'

    export default {
        components: {
            UserProfile
        },
        data() {
            return {
                user: {},
            }
        },
        created() {
            axios.get('/user/profile').then(res => this.user = res);
        }
    };
</script>

vuejs在数据结果中循环而不是我有多少字段

2 个答案:

个人资料