使用laravel+vue.js中的v-for，我试图显示一个包含用户信息的表，但没有显示任何内容

这是我的代码，但是数据没有显示在表中，即使在XHR中数据显示在那里

在inspect元素中，我可以看到数据，但v-for循环无法显示数据

<script>
    export default {
        name: "OutPatient",
        data(){
            return{
                out_patients: {}
            }
        },
        methods: {
                index(){
                        axios.get('/data/out_patient').then(({data}) =>
                                (this.out_patients = data.data));

                },
                update(){}
        },
        created(){
                this.index();
        }

    }
</script>



<tr v-for="out_patient in out_patients" v-bind:key="out_patient.id">
    <td>{{out_patient.id}}</td>
    <td>{{out_patient.first_name}}</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <a href="#"><i class="fa fa-edit blue"></i></a>
      | 
      <a href="#"><i class="fa fa-trash red"></i></a>
    </td>
</tr>

只需在数据中声明患者。我希望这能解决你的问题。 并检查门诊患者是否返回数据

只需在数据中声明患者。我希望这能解决你的问题。

---

同时还要检查门诊患者是否返回数据。

在我看来，您似乎尝试了两次提取数据，您有：

<script>
export default {
    name: "OutPatient",
    data(){
        return{
            out_patients: {},
            out_patient:'',
        }
    },
    methods: {
           index(){
                 axios.get('/data/out_patient')
                     .then(({data}) =>
                         (this.out_patients = data.data));

           },
            update(){

            }
        },
    created(){
        this.index();
    }
}
</script>



<tr v-for="out_patient in out_patients" v-bind:key="out_patient.id">
    <td>{{out_patient.id}}</td>
    <td>{{out_patient.first_name}}</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
        <a href="#">
            <i class="fa fa-edit blue"></i>
        </a>
        |
        <a href="#">
            <i class="fa fa-trash red"></i>
        </a>
    </td>
</tr>

---

如果您已经在此处提取数据：{data}，那么您不需要data.data，只需要下面的数据？

在我看来，您似乎尝试了两次提取数据，您有：

<script>
export default {
    name: "OutPatient",
    data(){
        return{
            out_patients: {},
            out_patient:'',
        }
    },
    methods: {
           index(){
                 axios.get('/data/out_patient')
                     .then(({data}) =>
                         (this.out_patients = data.data));

           },
            update(){

            }
        },
    created(){
        this.index();
    }
}
</script>



<tr v-for="out_patient in out_patients" v-bind:key="out_patient.id">
    <td>{{out_patient.id}}</td>
    <td>{{out_patient.first_name}}</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
        <a href="#">
            <i class="fa fa-edit blue"></i>
        </a>
        |
        <a href="#">
            <i class="fa fa-trash red"></i>
        </a>
    </td>
</tr>

如果您已经在这里提取它：{data}，那么您不需要data.data，只需要下面的数据

这对我来说相当有效。 谢谢大家的支持

这对我来说相当有效。

---

感谢大家的支持

您是否可以尝试在已安装的生命周期挂钩上获取数据，而不是在已创建的生命周期挂钩上获取数据，以便在表中填充页面上的数据？据我所知，加载是最好的挂钩生命周期。

您是否可以尝试在已安装的生命周期挂钩上获取数据，而不是在已创建的生命周期挂钩上获取数据，以便在表中填充页面上的数据据我所知，负载安装是最好的挂钩生命周期。

您是否将门诊患者转到Vue组件？您的控制台中是否有任何错误？模板周围有一个标记，不是吗？我没有将门诊患者转到Vue组件，也没有在控制台中收到任何错误一切都应按预期工作。尽管您@Benjiro应该提供一个不起作用的示例，但我可以为您提供一个起作用的示例：我已经通过SetTimeOut模拟了网络请求。您是否将门诊患者转到您的Vue组件？您的控制台中是否有任何错误？模板周围有一个标记，不是吗？我没有让门诊患者访问Vue组件，也没有在控制台中收到任何错误。一切都应按预期工作。尽管事实上you@Benjiro应该提供一个不起作用的例子，但我可以提供一个起作用的例子：我已经通过setTimeOut模拟了网络请求，患者不应该被声明，因为它可能导致混乱和故障。它对我有效。我也面临着类似的问题。上述解决方案对我有效。我在数据中添加了门诊患者，但表中没有显示任何内容。请在控制台中检查门诊患者obejct的值。索引{var self=this；axios.get'/data/out_patient'。然后数据=>self.out_patients=data.data；}，门诊病人不应该申报，因为它会引起混乱和故障。它对我有效。我也面临着类似的问题。上述解决方案对我有效。我在数据中添加了门诊患者，但表中没有显示任何内容。请在控制台中检查门诊患者obejct的值。索引{var self=this；axios.get'/data/out_patient'。然后数据=>self.out_patients=data.data；}，

index() {
                this.error = this.out_patients = null;
                this.loading = true;
                axios
                    .get('/data/out_patient')
                    .then(response => {
                        this.loading = false;
                        this.out_patients = response.data;
                    }).catch(error => {
                    this.loading = false;
                    this.error = error.response.data.message || error.message;
                });
            },