How to connect search field with datatable if they are in different views with VUEJS?

Question

I have a search field in the navbar component of my app and I want to connect it with the datatables, that they are in an otherfile.

I'm not sure if I have to do that with pops or with an event. What would the code structure look like?

This is the search input into the NavBar file:

<v-col
cols="12"
sm="6"
md="6">

<v-text-field
v-model="search"
id="search"
class="w-10"
append-icon="mdi-magnify"
placeholder="Search"
dense
solo
flat>
</v-text-field>

</v-col>

And this is the datatable in List.vue:

<v-data-table  
class="list px-10 pt-10"  
v-if="!loading"  
:headers="headers"  
:items="list"  
:items-per-page="itemsPerPage"  
:search="search"  
:page.sync="page"  
@page-count="pageCount = $event"  
show-expand  
single-expand  
:expanded.sync="expanded"  
@item-expanded="loadDetails"

> 

In other cases I have them in the same file, but not this time and I don't know how the search field can read the data from the table.

Answer 1

As per the explanation you added in the post, Navbar.vue and List.vue are siblings.

If Yes, You can pass the search field value to List component in two ways :

1. By using emit from Navbar component to parent and then pass that value to List component through props from a parent component.
2. Store the search field value in a state by using vuex store state management and then directly access it in the List.vue component or wherever you want.