텍스트 영역 구성 요소 텍스트 값을 어떻게 데이터베이스 바인딩하고 업데이트합니까?

텍스트 영역 구성 요소 텍스트 값을 어떻게 데이터베이스 바인딩하고 업데이트합니까?

일주일 전에 프로젝트를 위해 VueJs를 작업하고 있습니다.

2개의 컴포넌트를 만들었습니다.* 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" />

내 계정의 TextArea Custom 구성 요소에 무언가를 쓸 때.vue, 내 텍스트 값이 업데이트되지 않고 청취자 기능이 전달되지 않습니다.또 필요한 게 있나요?

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>

사용자 정의 값 바인딩textarea및 그input이벤트:

CustomTextarea.vue

<template>
  <div class="form-group">
    <label for="e-textarea">{{ title }}</label>
    <textarea
      id="e-textarea"
      class="form-control"
      row="3"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
    </textarea>
  </div>
</template>
<script>
import { FormGroupInput } from "@/components/NowUiKit";

export default {
  name: "e-textarea",
  components: {
    [FormGroupInput.name]: FormGroupInput
  },
  model: {
    prop: "textAreaVue"
  },
  props: {
    title: String,
    value: String
  },
  computed: {
    listenerFunction() {
      return {
        ...this.$listener,
        input: this.updateValue
      };
    }
  },
  methods: {
    updateValue(value) {
      console.log("function has been passed");
      this.$emit("input", value);
    }
  },
  mounted() {
    console.log(this.components);
  }
};
</script>

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

사용방법v-model:

<custom-textarea
    title="Informations complémentaires"
    v-model="otherInformation"></custom-textarea>

자세한 것은 이쪽

언급URL : https://stackoverflow.com/questions/62276944/how-databind-a-textarea-component-text-value-and-update-it