How to control the html elements with Vue and Laravel? - development

How to control the html elements with Vue and Laravel?

I have 2 basic files in order to manage the html in the page. The Vue component and the blade file. My blade file looks like this

@section('content')
    <products-component></products-component>
    <div class="row">
        <div class="mx-auto"></div>
        <div class="row">
            @foreach ($products as $product)
                <div class="col-md-4">
                    <div class="card mb-4 box-shadow">
                        <img src="/images/products///" class="card-img-top" alt="" style="height: 225px; width: 100%; display: block;">
                        <div class="card-body">
                            <h3></h3>
                            <p class="card-text"></p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted"></small>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="mx-auto"></div>
    </div>
@endsection

and my Vue component html section looks like this

<template>
    <div class="row">
        <input class="form-control" type="search" placeholder="Search" aria-label="Search" v-model="searchKey">
        <div class="col-md-4" v-for="product in products">
            <div class="card mb-4 box-shadow">
                <img :src="'/images/products/' + product.user_id + '/' + product.id + '/' + product.images[0].name" class="card-img-top" :alt="product.name" style="height: 225px; width: 100%; display: block;">
                <div class="card-body">
                    <h3 v-text="product.name"></h3>
                    <p class="card-text" v-text="product.description"></p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                        </div>
                        <small class="text-muted" v-text="product.created_at"></small>
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</template>

I want to accomplish a couple of things.

1. How can I manage the search behaviour from the blade file. What ever I put some html content from the Vue component to the blade file it gives me an error saying it didn’t know about the value of the JS I want to use. For example if i put the search bar in the blade file, this part:

It gives me an error: Property or method "searchKey" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Which means the blade file have no clue what is going on inside the Vue component.

2. I also want when someone search for a product to hide all the html from the blade file and just render the html from the Vue component. I tried doing this with an if-else code inside the blade file, but again it says that the blade file have no clue of if-else’s and what I am trying to do.

I am new to Laraval+Vue so I will be very happy if you can give me a hand and tell me how i suppose to do this. Thanks!

UPDATE: I forgot to mention that after my body tag i have a div with an ID of app and in my app.js file I have this code

const app = new Vue({
    el: '#app'
});

So view can control the html of my code. And it is also working when I am searching for a product, but I can’t make it hide the code from the blade file.

I am using Laravel 5.6 and Vue 2.5.16

from Laravel Questions and Answers https://laravelquestions.com/php/how-to-control-the-html-elements-with-vue-and-laravel/
via Lzo Media