Javascript Vue.js组件中的记录列表为空

我使用关系从表中获取数据。我想从products表中获取id为的产品，使用product_id作为表selectedproducts中的外键。但当我控制网络时，我的列表显示为空白。请帮帮我，我哪里错了

SelectedProduct.php

公共功能产品（）
{
返回$this->hasOne（'App\Product'）；
}

SelectedProductController.php

公共函数getAddedProducts（）
{
if（request（）->expectsJson（））{
$collection=Product:：with（'selectedproduct'）->where（'id'，'='，'Product_id'）->get（）；
印刷（收集）；
返回响应（）->json([
“itens”=>$collection
]);
}
返回视图（“仪表板”）；
}

选择product.vue

<template>
    <div className="row">
        <div className="col-12">
            <update-products v-if="editing"
                             :category="category" :singular="singular" :plural="plural"
                             v-on:close="closeEditing"></update-products>
            <div className="card" v-show="!editing">
                <div className="card-header">
                    <h3 className="card-title">{{title}}</h3>
                    <div className="card-tools">
                        <b-button variant="primary"
                                  @click="addOrRemoveFruits">Add Or Remove Fruits
                        </b-button>
                    </div>
                </div>
                <div className="card-body table-responsive p-0">
                    <spinner v-if="$root.loading"></spinner>
                    <b-table ref="table"
                             :items="items" :fields="fields" bordered hover :head-variant="'light'" responsive="sm"
                             v-else>
                        <template v-slot:cell
                                  (index)="data">
                            {{ data.index + 1 }}
                        </template>
                        <template v-slot:cell(name)=" data">
                            {{data.item.name}}
                        </template>
                    </b-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import UpdateProducts from './UpdateProducts.vue';

    export default {
        props: ['category', 'singular', 'plural'],
        components: {UpdateProducts},
        data() {
            return {
                title: `Selected ${this.plural}`,
                editing: false,
                model: null,
                items: [],
                formTitle: '',
                fields: [
                    {
                        key: 'index',
                        label: 'S.No.'
                    },
                    {
                        key: 'name',
                        sortable: true
                    },
                ],
            }
        },
        mounted() {
            this.fetchItems();
        },
        methods:
            {
                fetchItems() {
                    axios.get('/admin/selectedproducts/getAddedProducts')
                        .then(({data}) => {
                            this.items = data.items;
                        });
                },

                closeEditing(res) {
                    if (res) {
                        this.fetchItems();
                    }
                    this.editing = false;
                },

                addOrRemoveFruits() {
                    this.editing = true;
                    this.model = null;
                },
            }
    }
</script>

{{title}}
添加或删除水果
{{data.index+1}}
{{data.item.name}
从“/UpdateProducts.vue”导入UpdateProducts；
导出默认值{
道具：[“类别”、“单数”、“复数”]，
组件：{UpdateProducts}，
数据（）{
返回{
标题：`Selected${this.plural}`，
编辑：错，
型号：空，
项目：[]，
formTitle:“”，
字段：[
{
关键字：'索引'，
标签：“序列号”
},
{
关键字：“名称”，
可排序：正确
},
],
}
},
安装的（）{
this.fetchItems（）；
},
方法：
{
fetchItems（）{
获取（'/admin/selectedproducts/getAddedProducts'））
。然后（{data}）=>{
this.items=data.items；
});
},
关闭编辑（res）{
如果（res）{
this.fetchItems（）；
}
this.editing=false；
},
addorremoveefruits（）{
this.editing=true；
this.model=null；
},
}
}

Selectedproducts.php（迁移文件）

---

您的控制器中存在拼写错误：

return response()->json([
  'itens'=>$collection   
]);

此外，您可以将axios响应记录在Vue组件中，以检查后端响应的内容：

axios.get('/admin/selectedproducts/getAddedProducts')
  .then(({ data }) => {
    this.items = data.items;
    console.log(data); // <-- debug log
  });
},

axios.get（'/admin/selectedproducts/getAddedProducts'））
。然后（{data}）=>{
this.items=data.items；
console.log（data）；//您是否可以首先将此
'itens'=>$collection
更正为SelectedProductController.php中的项目-可能这是相关的？