为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

Smart猫小萌 2022-09-23 21:25:43

就在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 在文本区域自定义组件中编写某些内容时,我的文本值不会更新,并且我的侦听器函数也不会传递。我需要有别的东西吗?


查看完整描述

2 回答

?
梵蒂冈之花

TA贡献1543条经验 获得超5个赞

您可以通过v模型轻松执行此操作:


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


查看完整回答
反对 回复 2022-09-23
?
30秒到达战场

TA贡献1470条经验 获得超6个赞

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


查看完整回答
反对 回复 2022-09-23
  • 2 回答
  • 0 关注
  • 8 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信