html 如何数据绑定一个textarea组件文本值并更新它?

xienkqul  于 2022-11-20  发布在  其他
关注(0)|答案(3)|浏览(371)

我一直在工作VueJS只是1个星期前的一个项目。
我创建了两个组件:*科目.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>

*文本区域.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自定义组件中写入内容时,我的文本值没有更新,侦听器函数没有传递。我是否需要其他内容?

yyyllmsg

yyyllmsg1#

您可以通过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>
ie3xauqp

ie3xauqp2#

绑定自定义textareainput事件中的值:
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>

More explanation here

amrnrhlw

amrnrhlw3#

希望它能为某些人节省一些时间。在Vueidojs 3中,他们改变了这一点,与Vueidojs 2相比,我得到了它的工作:

<textarea :value="modelValue"
          @input="onInput" />

onInput方法如下所示:

onInput: function (e) {
   this.$emit("update:modelValue", e.target.value);
}

当然,您必须在“e-textarea”组件上使用prop“modelValue”,而不是像vue 2中那样使用value。我还在此modelValue上添加了一个监视器,以防它无法更新:

props: {
   modelValue: {
      type: String,
      default: null
   }
}
watch: {
   modelValue: function () {
      return this.modelValue;
   },
},

是的,您可以这样使用组件:

<e-textarea v-model="otherInformation" />

当然,如果您愿意或需要,您也可以侦听输入事件
你也可以在这里和这里找到更多关于这个变化的信息

相关问题