如何数据绑定 textarea 组件文本值并更新它？

Question

1 周前，我一直在为一个项目使用 VueJS。

我创建了两个组件： * 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（子组件）

<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 在我的 TextArea 自定义组件中写一些东西时，我的文本值没有更新，我的侦听器函数没有被传递。我需要有别的东西吗？

Answer 1

您可以通过v-model轻松做到这一点：

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

它等于：

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