I want to search for elements using an input field within a form. I am passing a value from a component to another and the content changes but only after pressing enter. Is there a way to automatically update the list, after every new letter is typed?
Here is my code:
Parent(App):
<template>
<div id="app">
<Header v-on:phrase-search="passPhrase" />
</div>
</template>
<script>
import Header from ...
export default {
name: "App",
components: {
Header,
},
data() {
return {
posts: [],
searchedPhrase: ""
};
}
computed: {
filteredPosts() {
let temp_text = this.searchedPhrase;
temp_text.trim().toLowerCase();
return this.posts.filter(post => {
return post.name.toLowerCase().match(temp_text);
});
}
},
methods: {
passPhrase(phrase) {
this.searchedPhrase = phrase;
}
}
};
</script>
Child(Header):
<template>
<div class="child">
<p>Search:</p>
<form #submit.prevent="phrasePassed">
<input type="text" v-model="phrase" />
</form>
</div>
</template>
<script>
export default {
name: "search",
data() {
return {
phrase: ""
};
},
methods: {
phrasePassed() {
this.$emit("phrase-search", this.phrase);
}
}
};
</script>
passPhrase() brings the value from the child to the parent and then filteredPosts() find appropriate elements. I suspect that the form might be guilty of this issue but I do not know precisely how to get rid of it and still be able to pass the value to the parent.
Thanks
in the child you use submit event which called on enter. you should use #input on the input itself. and btw you didnt need even to declare pharse in the data because you didnt use it in the child. you just pass it up
you it like so
<template>
<div class="child">
<p>Search:</p>
<form>
<input type="text" #input="phrasePassed">
</form>
</div>
</template>
<script>
export default {
name: "search",
methods: {
phrasePassed(e) {
this.$emit("phrase-search", e.target.value);
}
}
};
</script>
Related
I have a parent form template and each question of the form is inside a child component, like this
<template>
<question1
#display-answer-1="setAnswer1"
/>
<!-- other child components here... -->
</template>
<script>
import Question1 from '...path...';
export default{
components: { Question1 },
data() {
answer1: ''
},
methods: {
setAnswer1(answer1) {
this.answer1 = answer1;
}
}
};
and my child component is like this
<template>
<input type="text" v-model="answer1"/>
<div>
<button
type="button"
#click="saveQ2"
>Save
</button>
</div>
</template>
<script>
export default {
data() {
return {
answer1: ''
};
},
methods: {
saveQ2() {
const answer1 = this.answer1;
this.$emit('display-answer-1', answer1);
}
}
};
This code works, but in this way I'm forced to put a button whenever there is a question to pass data from the child to the form template parent. Is there a smart alternative not to put a save button under each question?
you can use the blur event whenever an input gets unfocused it'll fire the event .
<template>
<input #blur="saveQ2" type="text" v-model="answer1"/>
</template>
<script>
export default {
data() {
return {
answer1: ''
};
},
methods: {
saveQ2() {
const answer1 = this.answer1;
this.$emit('display-answer-1', answer1);
}
}
};
I have an input component that should call a method getUserSearch when the user types, and update the variable v_on_search with the variable v_model_search value.
I am displaying the content with the variables: v_model_search and v_on_search to test, although only the v-model seems to be working.
<template>
<div>
<input type="text" placeholder="search here" v-model="v_model_search" v-on:oninput="getUserSearch()">
<p>{{v_model_search}}</p>
<p>{{v_on_search}}</p>
</div>
</template>
<script>
export default {
name: 'SearchBox',
data () {
return {
v_model_search: '',
v_on_search: ''
}
},
methods: {
getUserSearch ()
{
this.v_on_search = this.v_model_search
}
}
}
</script>
Try
v-on:input="getUserSearch()"
or shorter
#input="getUserSearch()"
Vue recognizes HTML events but they don't have the "on" prefix
I have two components, is there a way to store value from another component's data?
Here is Create.vue
<template>
<div id="main">
<Editor />
//some codes here
</div>
</template>
<script>
import Editor from './_Create_Editor.vue'
export default {
components: { Editor },
data: () => ({
text: ''
}),
}
</script>
And here is the _Create_Editor.vue.
<template>
//sample input for demonstration purposes
<input type="text" class="form-control" v-model="text"/>
</template>
The code above returns an error:
Property or method "text" is not defined on the instance but referenced during render
I want everytime I type the data: text from Create.vue has the value of it.
How can I possibly make this? Please help.
You can do this by using $emit.
Create.vue
<template>
<div id="main">
<Editor
#edit={onChangeText}
/>
//some codes here
</div>
</template>
<script>
import Editor from './_Create_Editor.vue'
export default {
components: { Editor },
data: () => ({
text: ''
}),
methods: {
onChangeText: function (value) {
this.text = value
}
}
}
</script>
_Create_Editor.vue
<template>
//sample input for demonstration purposes
<input
type="text"
class="form-control"
#change="onChange"
/>
</template>
<script>
export default {
methods: {
onChange: function (event) {
this.$emit('edit', event.target.value)
}
}
}
</script>
I have a simple form component:
<template>
<div>
<form #submit.prevent="addItem">
<input type="text" v-model="text">
<input type="hidden" v-model="id">
<input type="submit" value="enviar">
</form>
</div>
</template>
This component has a method that use $emit to add text item to a parent data:
addItem () {
const { text } = this
this.$emit('block', text)
},
Here is markup on my main file:
<template>
<div id="app">
<BlockForm #block="addBlock"/>
<Message v-bind:message="message"/>
</div>
</template>
And the script:
export default {
name: 'app',
components: {
BlockForm,
Message
},
data () {
return {
message : []
}
},
methods: {
addBlock (text) {
const { message } = this
const key = message.length
message.push({
name: text,
order: key
})
}
}
}
My question is: Message component list all items create by BlockForm component and stored inside message array. I add a edit button for each item inside Message list. How can I pass item text to be edited in BlockForm component?
You could just bind the input inside the BlockForm to a variable that is in the parent component. This way when you $emit from the child component, just add the value to the messages.
export default {
name: 'app',
components: {
BlockForm,
Message
},
data () {
return {
message : [],
inputVal: {
text: '',
id: ''
}
}
},
methods: {
addBlock () {
const key = this.message.length
this.message.push({
name: this.inputVal.text,
order: this.inputVal.text.length // If the logic is different here, you can just change it
})
this.inputVal = {
text: '',
id: ''
}
}
}
}
Now when you are calling the BlockForm,
<template>
<div id="app">
<BlockForm propVal="inputVal" #block="addBlock"/>
<Message v-bind:message="message"/>
</div>
</template>
and inside BlockForm,
<template>
<div>
<form #submit.prevent="addItem">
<input type="text" v-model="propVal.text">
<input type="hidden" v-model="probVal.id">
<input type="submit" value="enviar">
</form>
</div>
</template>
Now, when you press edit for existing message, simple assign that "Message" to inputVal data property mapping it to proper text and id.
I have a input with attribute "ref" and I don't want to use v-model
<div class="form-group m-b-40">
<input type="text" class="form-control" id="name" ref="name" required>
</div>
{{showInput}}
I want to show my input value automatically. I do this
methods: {
showInput: function () {
this.$refs.name.value
},
}
but it isn't updated.
Because the value of a ref isn't an observable object unless it's bound to the component instance:
data() {
return {
name: ''
}
}
Then give your input a :value="name" and now it has an observer attached to it
I can't understand what you want to do,but the way you are doing it seems to be wrong.Anyway,you said i dont want to use v-model.
I am going to show you how to do it without v-model,you can fetch the input value from api(you have to write your own code for this) and set it to input:
<template>
<div>
<div class="form-group m-b-40">
<input type="text" :value="text" #input="updateValue">
<hr>
</div>
The input value is: {{text}}
</div>
</template>
<script>
export default {
data() {
return {
text: ''
}
},
created() {
this.fetchFromApi()
},
methods: {
updateValue(value) {
let newValue = value.target.value
this.text = newValue
},
fetchFromApi() {
//write the code to get from API the input value and then:
this.text = 'input value' //set the input value
}
}
}
</script>
See it in action here