How do I make this component to pass its value into a parent component?

2
votes

I had 2 components - search filter, and iterator in the same component App.vue like that:

App.vue

<v-text-field 
  :search="search"
  v-model="search"
  label="type here to filter" 
>
</v-text-field>


<v-data-iterator
  :items="sortedContents"
  :search="search"
  v-model="selected"
>
  ...
</v-data-iterator>

...

data () {
  return {
    search: '',
  {
}

But then I moved that search filter into a separate component called <toolbar> and it the search filter inside it doesn't work anymore:

App.vue

<!-- this component contains the <v-text-field> -->
<toolbar :search="search"></toolbar>


<v-data-iterator
  :items="sortedContents"
  :search="search"
  v-model="selected"
>
  ...
</v-data-iterator>

...

data () {
  return {
    search: '',
  {
}

Codepen: https://codepen.io/anon/pen/ddEjgp?editors=1010

Question:

What should I add into that new <toolbar> component in order for it to pass the data typed into that search filter to the App.vue parent component?

1
vue.jsvuejs2vuetify.js
You need to pass props, you'll get some help here: stackoverflow.com/questions/46680079/… - Bhojendra Rauniyar
@BhojendraNepal I just update the codepen, I added props: ['search'], but it still doesn't work, am I doing it wrong? - Un1

1 Answers

2
votes

You are expecting that changed search value will be availiable to parent component and this is wrong. According to vue docs:

One-Way Data Flow

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

You should handle change or input (more appropriate to your task) events in toolbar's v-text-field (@input="onInput") and emit some event (this.$emit('filterinput', str)) to pop data to parent component! And parent should listen (@filterinput="localSearchUpdate") to that event (filterinput in codepen) and change (method localSearchUpdate) local to him search data with received from event string:

https://codepen.io/anon/pen/rJgqqv?editors=1010