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

Question

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

结果

个人资料.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>

用户配置文件.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>

标签： laravelvue.js

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: '[e-mail]'
              }
            ],
        }
      },
      created() {
        // User.all(users => this.users = users)
      }
  };
</script>