如何在 vue js 中获取动态文本区域的值？答案

【问题标题】：How to get values of dynamic textareas in vue js?如何在 vue js 中获取动态文本区域的值？
【发布时间】：2021-08-10 21:07:53
【问题描述】：

我正在v-for 循环内创建文本字段现在令人困惑的是如何获取所有这些输入的值，这些输入不是固定数字输入，因此我可以在data() 中设置它们的变量

我如何呈现输入

  <ion-list>
        <ion-item v-for="(worker, index) in this.workers" :key="index">
          <ion-label text-wrap>
            {{ worker.name }}
          </ion-label>
           <ion-textarea placeholder="Enter Detail..."></ion-textarea>
        </ion-item>
      </ion-list>

      <section style="margin: 20px 30px;--color: #272727;"></section>
      <section>
        <ion-button
          shape="round"
          expand="full"
          @click="submit"
          style="--background: #272727;text-transform: capitalize;font-size: 16px;color: #ffc946;"
        >Submit</ion-button>
        <!-- Save -->
      </section>

在submit() 方法中，我想获取所有这些文本区域的值

【问题讨论】：

标签： javascript vue.js ionic-framework vuejs3

【解决方案1】：

在template 部分你不应该使用this。实际上，如果不是“错误”，Vue 至少应该输出一个“警告”
尝试从数据集和结构的角度进行思考。您不想“从输入字段中获取数据” - 您根据您拥有的数据输出输入字段。这听起来像是“禅宗公案”，但使用这种方法更容易掌握 Vue（和其他反应式框架）。

这里有一个小例子：

Vue.component("InputField", {
  props: ['id', 'value'],
  computed: {
    fieldValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit("update:value", val)
      }
    },
  },
  template: `
    <div>
    {{ id }}
    <input
      type="text"
      v-model="fieldValue"
    />
    </div>
  `
})
new Vue({
  el: "#app",
  data() {
    return {
      formFields: [],
    }
  },
  methods: {
    addField() {
      this.formFields.push({
        id: this.formFields.length + Date.now(),
        value: null,
      })
    },
  },
  template: `
    <div>
    <button
      @click="addField"
    >
      ADD FIELD +
    </button>
    {{ formFields }}
    <hr />
    <input-field
      v-for="field in formFields"
      :key="field.id"
      :id="field.id"
      :value.sync="field.value"
    />
    </div>
  `
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

【讨论】：

【解决方案2】：

这里我们可以使用 v-model 指令获取输入值，并在按钮中 250 毫秒后去抖动这个值

<ion-list>
        <ion-item v-for="(worker, index) in this.workers" :key="index">
          <ion-label text-wrap>
            {{ worker.name }}
          </ion-label>
           <ion-textarea placeholder="Enter Detail..." v-model="input"></ion-textarea>
        </ion-item>
      </ion-list>

      <section style="margin: 20px 30px;--color: #272727;"></section>
      <section>
        <ion-button
          shape="round"
          expand="full"
          @click="submit"
          style="--background: #272727;text-transform: capitalize;font-size: 16px;color: #ffc946;"
        >{{buttonText}}</ion-button>
        <!-- Save -->
      </section>

脚本文件/标签：

export default{
data:{
input: "",
buttonText: "Submit xyz"
},
watch: {
   input: _debounce(function(){
   this.buttonText = this.input !== "" ? "Submit" + this.input : "Submit";
  }, 250)
 },
}

【讨论】：