时间戳

首页 > 解决方案 > 如何在 Vue 中通过 v-model 获取输入值

vue.js - 如何在 Vue 中通过 v-model 获取输入值

问题描述

我有一个通过点击事件生成输入的按钮。我想通过 v-model 而不是 $ref 获取输入值，但我知道该值未定义，我该如何实现？这是我的代码：

<div class="price-round-creation-containe" v-for="(shareholder, index) in shareholders" :key="index">
          <div>
            <input v-model="shareholder.username" :name="`shareholders[${index}][username]`" type="text" class="form-control input" >
          </div>
            <div>
            <input v-model="shareholder.investment" :name="`shareholders[${index}][investment]`" type="text" class="form-control input" >
            <i v-if="shareholder.dynamic" class="fas fa-trash"  @click="deleteItem(index)"/>
          </div>
         
        </div>

我的 js 数据去哪里：

shareholders: [
      {
        investment: "Investment",
        username: "Username",
        dynamic: false
      },
    ],

以及我推送输入的方式：

  createNewPricedRoundShareholder() {
    this.shareholders.push({
      username: "Username",
      investment: "Investment",
      dynamic: true
      })
     },

以及我如何尝试访问该值：

      let username = this.shareholders.username;

以及获取值的函数：

getPricedRoundFormData() {
      const totalShareAmount = this.$refs.pricedRoundForm.roundAmount.value.replace(/,/g,"");
      const shareType = this.$refs.pricedRoundForm.shareType.value.replace(/,/g,"");
      let username = this.$refs.pricedRoundForm.username.value.replace(/,/g,"");
      let investment = this.$refs.pricedRoundForm.investment.value.replace(/,/g,"");
      
      let usernames, investments;
      if (!username.length) {
        usernames = [username.value];
        investments = [investment.value];
      } else {
        usernames = Array.from(username).map((el) => el.value);
        investments = Array.from(investment).map((el) => el.value);
      }
      return { usernames, investments, shareType, totalShareAmount };
    },

和提交功能：

  async submitPricedRound() {
      this.showNewPriceRoundDialog = false;
      const pricedRoundData = this.getPricedRoundFormData();
      this.addPricedRound(pricedRoundData);
    },

标签： vue.js

解决方案

由于this.shareholders是对象数组，因此通过索引访问特定股东：

this.shareholders[index].username;

例如，在您的deleteItem方法中：

methods: {
  deleteItem(index) {
    /* do something with */ this.shareholders[index].username;
  }
}

编辑，回复评论：

如果你想要一个包含所有用户名的数组，你可以这样做：

const usernames = this.shareholders.map(s => s.username);

推荐阅读