Как передать значение полученное с input v-model='searchQuery' из одного компонента в другой. Например есть два компонента vue таблица и поиск (фильтр по именам таблицы) как из поиска передать значение v-model='searchQuery' в таблицу. Примерный код
<template>
<div id="app">
<NewSearch></NewSearch>
<NewTable></NewTable>
</div>
</template>
<script>
import Hello from './components/Hello.vue'
import Search from './components/Search.vue'
export default {
name: 'app',
components: {
NewTable: Hello,
NewSearch: Search
}
}
</script>
// Search.vue
<template>
<div class="search-block">
<input id="input-search" type="text" placeholder="Search users" v-model="searchQuery">
</div>
</template>
<script>
export default {
name: 'searchBlock',
data: function() {
return {
searchQuery: ''
}
}
}
</script>
// Table (hello)
<template>
<div class="container">
<table>
<tr>
<th v-for='column in columns' v-on:click='sortTable(column)'>
{{ column }}
</th>
</tr>
<tr v-for='row in filteredUsers'>
<td v-for="column in columns">{{row[column]}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'hello',
data: function() {
return {
rows: [
{ name: 'John', email: "john@gmail.com", root: 'superAdmin' },
{ name: 'Jane', email: "jane@gmail.com", root: 'superAdmin' },
{ name: 'Paul', email: "paul@gmail.com", root: 'Admin' },
{ name: 'Kate', email: "kate@gmail.com", root: 'Admin' },
{ name: 'Amanda', email: "amanda@gmail.com", root: 'User' },
{ name: 'Steve', email: "steve@gmail.com", root: 'superAdmin' },
{ name: 'Keith', email: "keith@gmail.com", root: 'User' },
{ name: 'Don', email: "don@gmail.com", root: 'Admin' },
{ name: 'Susan', email: "susan@gmail.com", root: 'superAdmin' }
]
}
}
computed: {
filteredUsers: function() {
return this.rows.filter(function(user) {
return user.name.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1;
}.bind(this));
}
}
</script>