How do I hide and show a child component that contains an input

user_6813433 0
Viewed 91

This is the div that I want to toggle to hide and show. 

<div class="flex" v-show="studentName && !sortBy && !country">
                <student-search :student_name.sync="studentsName"></student-search> 
            </div>

Everytime I click on the button below 

<div class="flex text-center" style="margin-top:3px;" v-show="studentName && sortBy && country">
                <button @click="showSearchByName" type="submit" class="bg-blue p-2 h-10 mt-2 w-3/5 text-white hover:bg-black flex">
                    <svg class="text-center fill-current text-white h-4 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H303.2c.9-4.5.8 3.6.8-22.4 0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6 0 26-.2 17.9.8 22.4H48V144h480v288zm-168-80h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm-168 96c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64z"/>
                    </svg>
                </svg>
                <div class="text-center flex">
                    <p class="ml-4 font-bold text-center">Show Search By Name</p>
                </div>
            </button>
        </div>

I execute this to show the search box input on top

        showSearchByName(){
            this.sortBy = "";
            this.country = null;
            this.studentsName = "";
        }

now, i want to hide the search bar and reset its entry everytime I execute that ..

The child component would receive that student_name prop right ? how do I reset the input when it iss a child component?

laravel vue.js
1 Answers

I think that you need to change data in parent component from the child.

Change your method in child component:

showSearchByName() {
    this.$emit('search')
}

Then in your parent do this:

<student-search :student_name.sync="studentsName" @search="setDataEmpty"></student-search>

methods: {
    setDataEmpty () {
        this.sortBy = "";
        this.country = null;
        this.studentsName = "";
    }
}

You can read more in the docs about that.

user_108676560
Related