如何对文本区域组件文本值进行数据绑定和更新？

Question

就在1周前，我一直在为一个项目在VueJS上工作。

我创建了两个组件： * 帐户.vue （父级）

<!--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 （子组件）

<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" />

当我从我的 Account.vue 在文本区域自定义组件中编写某些内容时，我的文本值不会更新，并且我的侦听器函数也不会传递。我需要有别的东西吗？

Answer 1

您可以通过v模型轻松执行此操作：<textarea&nbsp; id="e-textarea"&nbsp; class="form-control"&nbsp; row="3"&nbsp;v-model="value"></textarea>它等于：<textarea&nbsp; id="e-textarea"&nbsp; class="form-control"&nbsp; :value="value"&nbsp; @input="value = $event.target.value"> </textarea>

Answer 2

绑定自定义和事件中的值：textareainputCustomTextarea.vue<template>&nbsp; <div class="form-group">&nbsp; &nbsp; <label for="e-textarea">{{ title }}</label>&nbsp; &nbsp; <textarea&nbsp; &nbsp; &nbsp; id="e-textarea"&nbsp; &nbsp; &nbsp; class="form-control"&nbsp; &nbsp; &nbsp; row="3"&nbsp; &nbsp; &nbsp; v-bind:value="value"&nbsp; &nbsp; &nbsp; v-on:input="$emit('input', $event.target.value)"&nbsp; &nbsp; >&nbsp; &nbsp; </textarea>&nbsp; </div></template><script>import { FormGroupInput } from "@/components/NowUiKit";export default {&nbsp; name: "e-textarea",&nbsp; components: {&nbsp; &nbsp; [FormGroupInput.name]: FormGroupInput&nbsp; },&nbsp; model: {&nbsp; &nbsp; prop: "textAreaVue"&nbsp; },&nbsp; props: {&nbsp; &nbsp; title: String,&nbsp; &nbsp; value: String&nbsp; },&nbsp; computed: {&nbsp; &nbsp; listenerFunction() {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; ...this.$listener,&nbsp; &nbsp; &nbsp; &nbsp; input: this.updateValue&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; updateValue(value) {&nbsp; &nbsp; &nbsp; console.log("function has been passed");&nbsp; &nbsp; &nbsp; this.$emit("input", value);&nbsp; &nbsp; }&nbsp; },&nbsp; mounted() {&nbsp; &nbsp; console.log(this.components);&nbsp; }};</script><style src="@/assets/styles/css/input.css" />并将其与以下各项一起使用：v-model<custom-textarea&nbsp; &nbsp; title="Informations complémentaires"&nbsp; &nbsp; v-model="otherInformation"></custom-textarea>