javascript - 带有vue的Laravel不能做array.push

Question

我得到了一个产品组件，它有一个来自 2 个连接表products和表的suppliers表。当我添加数据时，我总是调用getProducts()正在调用该index方法的方法，并且我不希望每次添加产品或广播中的成功事件时都会发生这种情况。我试着this.products.push(e.product)从我的广播活动中做。似乎我有一个错误Error in render: "TypeError: Cannot read property 'supplier_name' of undefined"。有人能告诉我该怎么做吗？

这是我的产品控制器。索引和存储

   public function index()
    {
        $products = Product::with('supplier')->get();
        return response()->json($products);
    }

public function store(Request $request)
    {
        $product = new Product;
        $validator = \Validator::make($request->all(), [
            'product_name' => 'required',
            'barcode' => 'required|unique:products',
            'price'=> 'required',
            'category' => 'required',
            'supplier' => 'required',
        ]);
        if ($validator->fails()) {
          //some validations
        } else {
            $product->barcode = $request->barcode;
            $product->product_name = $request->product_name;
            $product->price = $request->price;
            $product->quantity = 0;
            $product->category = $request->category;
            $product->supplier_id = $request->supplier;
            $product->save();

            broadcast(new ProductsEvent(\Auth::user()->name, $product));
        }
    }

产品活动

class ProductsEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $user, $product;
    public function __construct($user, Product $product)
    {
        $this->user = $user;
        $this->product = $product;
    }
    public function broadcastWith(): array
    {
        return [
            'product' => $this->product,
            'user' => $this->user
        ];
    }
    public function broadcastOn()
    {
        return new Channel('Products');
    }
}

vue组件方法

   addProduct(){
                axios.post('/addProduct',{
                    product_name: this.product_name,
                    quantity: 0,
                    supplier: this.supplier.id,
                    category: this.category,
                    barcode: this.barcode,
                    price: this.price
                }).then((res)=>{
                    this.clearValues()
                    $('#exampleModal').modal('hide')
                    toastr.success('Product Added!')
                    this.getProducts() //always calling this method
                }).catch((res)=>{
                    toastr.error(res.message+' Check your Inputs')
                })
            },

   created(){
            this.getProducts()
            this.getSuppliers()
            window.Echo.channel('Products').listen('ProductsEvent',(e)=>{
                //this.products.push(e.product) this one is the error
                this.getProducts() // i need to call this everytime
                console.log(e.product)
                // console.log(e.product.product_name +' has been added by '+ e.user);              
            })
        }

Console.log 输出

barcode: "2005"
category: "Phone"
created_at: "2020-05-08 15:35:28"
deleted_at: null
price: 500
product_id: 41
product_name: "Headset"
quantity: 0
supplier_id: 1
updated_at: "2020-05-08 15:35:28"
__proto__: Object

更新：将广播返回更改为

 public function broadcastWith(): array
    {
        return [
            'product' => $this->product->with('supplier')->orderBy('product_id', 'desc')->first(),
            'user' => $this->user
        ];
    }

从控制台登录时使用console.log(e.product)

{product_id: 57, barcode: "61", product_name: "Push 2", price: 200, quantity: 0, …}
barcode: "61"
category: "Phone"
created_at: "2020-05-08 17:33:14"
deleted_at: null
price: 200
product_id: 57
product_name: "Push 2"
quantity: 0
supplier: {supplier_id: 1, supplier_name: "Apple", supplier_address: "California", supplier_email: "[e-mail]", supplier_phone: "09270277397", …}
supplier_id: 1
updated_at: "2020-05-08 17:33:14"
__proto__: Object

似乎 DOM 没有更新使用this.products.push(e.product)

标签： javascriptphparrayslaravelvue.js