Permalink
Browse files

event emitter kullanımı

  • Loading branch information...
erselgulyaz committed Apr 12, 2018
1 parent bdef553 commit 1034d2be2bd6a9f7641fdac76a553f3b86e7263a
Showing with 76 additions and 1 deletion.
  1. +13 −1 src/App.vue
  2. +63 −0 src/components/SearchForm.vue
@@ -1,15 +1,27 @@
<template>
<div id="app">
{{message}}
<search-form v-on:searchQuery="handleSearch" />
</div>
</template>
<script>
import SearchForm from './components/SearchForm.vue'
export default {
data () {
return {
message: 'Hello World!'
}
},
methods: {
handleSearch (q) {
alert(q)
fetch(`https://jsonplaceholder.typicode.com/users/${q}`)
.then((res) => { return res.json() })
.then((res) => { console.log(res) })
}
},
components: {
SearchForm
}
}
</script>
@@ -0,0 +1,63 @@
<template>
<div class="search-parent-selector">
<div class="search-child-selector">
<div class="search-form">
<input type="text" class="form-input" v-model="query" />
<button class="form-button" @click="triggerSearch()">ARA</button>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
query: ''
}
},
methods: {
triggerSearch () {
this.$emit('searchQuery', this.query)
}
}
}
</script>
<style lang="scss">
.search {
&-parent-selector {
display: inline-block;
width: 100%;
text-align: center;
}
&-child-selector {
display: inline-block;
width: 600px;
}
&-form {
>* {
float: left;
}
.form-input {
width: 65%;
height: 45px;
border: 1px solid #dddddd;
border-radius: 4px;
padding: 0 10px;
outline: none;
}
.form-button {
float: right;
width: 30%;
height: 47px;
border: none;
background-color: #27ae60;
color: #ffffff;
border-radius: 4px;
outline: none;
cursor: pointer;
}
}
}
</style>

0 comments on commit 1034d2b

Please sign in to comment.