How to pass an object as a parameter to Vue @click event handler-CodePudding

I am a begginer and I am building a project with Vue and Laravel and have the following code:

<div class="preview-icon" @click="showPreview(product, 'heritage/'   product.link.toLowerCase())">
    <i class="material-icons">&#xE417;</i>
</div>

showPreview (product, link) {
                this.preview.name        = product.name;
                this.preview.category    = product.category;
                this.preview.description = product.description;
                this.preview.image       = product.image;
                this.preview.link        = link;
                this.preview.weight       = product.weight;
                this.preview.dimensions   = product.dimensions;
                this.preview.bulbs        = product.bulbs;
                console.log(link);
                // Show Modal Response
                $("#modal-preview").appendTo("body").modal('show');
            }

The product argument is an object, this is what appears in console.log(product):

{
    "id": 227,
    "ul": 0,
    "new": 1,
    "category": "Suspension",
    "productCategory": "suspension",
    "description": "Inspired by the enigmatic life of Abbey Lincoln, this majestic pendant light will be the right lighting design choice for a dramatic dining room. A memorable piece that counts with golden finishes and black matte to give it a twist. This luxurious modern pendant lamp will be giving life and a statement to your modern home decor.",
    "name": "ABBEY",
    "weight": "Approx.: 15 kg | 33 lbs",
    "dimensions": "Height: 11.8'' | 30 cm </br> Width: 43,3'' | 110 cm </br> Length: 74'' | 190 cm",
    "bulbs": "6 x E14 Halogen | Max 28w",
    "image": "thumbnail/products/227/abbey-suspension98b87227e8352440cd7d9a6e888aa113.png",
    "image_hover": "thumbnail/products/227/abbey-suspension.jpg",
    "imageAlt": "mid-century style, mid-century lighting, mid-century lighitng brand, mid-century modern lighting, mid-century modern, mid-century lighting fixture, mid-century fixture, mid-century modern fix",
    "link": "Suspension/ABBEY",
    "shop_url": "https://shop.delightfull.eu/abbey-suspension-light?utm_source=website&utm_medium=pagproduct&utm_content=delightfull-buy-now&utm_campaign=shop"
}

Each time, the product object is being inserted with DB data, but now I have to manually insert some specific objects as a parameter, but if I try to insert the object directly into the event handler it shows an error:

So is it possible to pass an object as a parameter?

CodePudding user response：

Yes you could and for the strings inside it use single quotes since you're using "" in event handler :

 @click="showPreview({id:1,name:'test'})"