Commit 1438231e authored by julienmege's avatar julienmege
Browse files

pass search filter to the parent

parent 8ddc096b
<template>
<div id="app">
<img src="./assets/logo.png">
<Filters :userList="users"/>
<UserList/>
<Filters :search="searchQuery"
@input="search => { searchQuery = search }"/>
<UserList :search="searchQuery"/>
</div>
</template>
<script>
import UserList from './components/UserList/UserList'
import Filters from './components/Filters'
import fetchUsers from '@bonita/api/src/fetchUsers.js'
export default {
name: 'App',
data () {
return {
users: []
searchQuery: ''
}
},
created () {
// fetch the data when the view is created and the data is already being observed
fetchUsers().then((users) => { this.users = users })
},
components: {
UserList,
Filters
......
<template>
<div class="filters">
<h1>{{ msg }}</h1>
<ul>
<li v-bind:key="user.userName" v-for="user in userList">
{{ user.userName }}
</li>
</ul>
</div>
<h1>Search: </h1>
<input v-bind:value="searchFilter"
v-on:input="updateSearch($event.target.value)" >
</div>
</template>
<script>
export default {
name: 'Filters',
props: ['userList'],
props: ['search'],
data () {
return {
msg: 'Welcome to Your Vue.js App',
usersList: []
searchFilter: this.search
}
},
created () {
methods: {
updateSearch: function (value) {
this.$emit('input', value)
}
}
}
</script>
......
import fetchUsers from '../../../../common/api/src/fetchUsers.js'
export default {
name: 'Users',
props: ['search'],
data () {
return {
msg: 'Welcome to Your Vue.js App',
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment