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

Question

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

选定产品.php

public function product()
{
    return $this->hasOne('App\Product');
}

SelectedProductController.php

public function getAddedProducts()
{
    if (request()->expectsJson()){
        $collection = Product::with('selectedproduct')->where('id','=','product_id')->get();
        print_r($collection);
        return response()->json([
             'itens'=>$collection   
        ]);
    }
    return view('dashboard');
}

选择产品.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>

Selectedproducts.php（迁移文件）

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Query\Expression;
use Illuminate\Database\QueryException;

class SelectedProducts extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('selected_products', function (Blueprint $table) {
            $table->unsignedInteger('category_id');
            $table->unsignedInteger('product_id');
            $table->integer('priority');

            $table->primary(['category_id','product_id']);
            $table->foreign('category_id')->references('id')->on('categories')->onDelete('restrict');
            $table->foreign('product_id')->references('id')->on('products')->onDelete('restrict');
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('selected_products');
    }
}

标签： javascriptphplaravelvue.js

Answer 1

您的控制器中有拼写错误：

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

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

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