Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
176
rated 0 times [  182] [ 6]  / answers: 1 / hits: 11137  / 4 Years ago, tue, june 9, 2020, 12:00:00

I've been working on VueJS just 1 weeks ago for a project.



I've created two components:
* Account.vue (Parent)



<!--It's just a little part of the code-->
<e-textarea
title=Informations complémentaires
@input=otherInformation <!--otherInformation is a string variable which contains the text value-->
:value=otherInformation></e-textarea>






  • TextArea.vue (Children Component)



<template>
<div class=form-group>
<label for=e-textarea>{{ title }}</label>
<textarea
id=e-textarea
class=form-control
row=3
:value=value
v-on=listeners
>
</textarea>
</div>
</template>
<script>
import { FormGroupInput } from @/components/NowUiKit;

export default {
name: e-textarea,
components: {
[FormGroupInput.name]: FormGroupInput
},
props: {
title: String,
value: String
},
computed: {
listeners() {
return {
...this.$listeners,
input: this.updateValue
};
}
},
methods: {
updateValue(value) {
this.$emit(input, value);
}
},
mounted() {
console.log(this.components);
}
};
</script>

<style src=@/assets/styles/css/input.css />



When I write something in my TextArea Custom component from my Account.vue, my text value does not update and my listener function is not passed. Does I need to have something else?


More From » html

 Answers
4

You can easily do this by v-model:



<textarea
id=e-textarea
class=form-control
row=3
v-model=value
>
</textarea>


it's equals to:



<textarea
id=e-textarea
class=form-control
:value=value
@input=value = $event.target.value> </textarea>

[#3540] Friday, June 5, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
stephonkeandrer

Total Points: 392
Total Questions: 94
Total Answers: 100

Location: Tajikistan
Member since Sun, Aug 29, 2021
3 Years ago
;