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

v-for

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

<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>

<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>

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>

<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>

<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>

轮廓
从“../partials/UserProfile.vue”导入用户配置文件
从“../models/User”导入用户
从“../core/Form”导入表单
导出默认值{
组成部分：{
用户配置文件
},
数据（）{
返回{
用户：[
用户：[]，
],
}
},
创建（）{
get（'/user/profile'）。然后（res=>this.users=res）；
}
};

UserProfile.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>

<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>

<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>

名称
电子邮件
更新
发送
从“../core/Form”导入表单
导出默认值{
道具：['user']，
数据（）{
返回{
表格：新表格({
名称：this.user.name，
})
}
},
计算：{
//
},
安装的（）{
},
方法：{
//
onSubmit（）{
axios.post（“/user/update”{
名称：this.user.name
})
.then（console.log（'yeahh'））
.catch（console.log（'failed'））
}
}
};

您的

用户

内部数据看起来有误。 这是一个经过编辑的版本 轮廓

<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>

从“../partials/UserProfile.vue”导入用户配置文件
从“../models/User”导入用户
从“../core/Form”导入表单
导出默认值{
组成部分：{
用户配置文件
},
数据（）{
返回{
用户：[
{
姓名：'FirstName LastName'，
电子邮件：“名字。lastname@gmail.com'
}
],
}
},
创建（）{
//User.all（users=>this.users=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>

<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>

轮廓
从“../partials/UserProfile.vue”导入用户配置文件
从“../models/User”导入用户
从“../core/Form”导入表单
导出默认值{
组成部分：{
用户配置文件
},
数据（）{
返回{
用户：{}，
}
},
创建（）{
get（'/user/profile'）。然后（res=>this.user=res）；
}
};

是否意味着在

用户

数组中只有一个用户？另外，

user.id

从哪里来？很抱歉，我在发布之前忘记编辑它，它现在已编辑它的用户：[]不是用户：[{name:'Axel Mhar'}]如果你

console.log（this.users），你会得到什么在你的
created（）
方法中（在你获取用户的那一行之后）。我获取
[ob:Observer]
oops对不起，我没有在stackoverflow中使用我不知道如何用代码包装这个format@AxelMhar你必须点击打开它。在注释中对代码使用反勾号。使用Vue开发工具扩展，自学如何使用开发人员控制台。学习如何调试应该是#1优先事项。是的，对不起它的用户：[]，我正在获取数据库中的所有数据，但是为什么v-for在我没有多少字段的情况下循环我想要获取的数据示例我正在获取当前登录的用户，它应该只循环一次，就像在新创建的调用中一样。您现在只为一个用户获取数据。很抱歉，您多次更改示例，因此很难帮助您更改代码。我在渲染中遇到错误：“TypeError:无法读取null的属性'id'”我无法读取user.id id这就是它抛出该属性的原因error@AxelMhar您能显示路由的控制器方法吗？`public function show（）{return auth（）->user（）}我无法用代码格式化它，但我会返回当前记录的user@AxelMhar它在属性中循环的原因是因为您只返回一个用户。我假设您将来会返回多个，或者它总是当前身份验证用户？不，它的个人配置文件设置，我只想返回当前用户登录的数据，并在表单中填充字段，使所有数据都是被动的