时间戳

首页 > 解决方案 > 多个：vue中的值

javascript - 多个：vue中的值

问题描述

我有这个可以获取价值并将其与其他人一起以表格形式发送到我的后端

<select 
    v-model="formData.account_bank" 
    id="branch" 
    @change="getbranch"
>
  <option v-for="bank in selectBank" :key="bank.id" :value="bank.code">{{ 
      bank.name
  }}</option>
</select>

但在发送之前，我需要获取一些数据来填充第二个选择框bank.id，我应该:value = "bank.id"在上面的代码中使用它。

为了获得值来进行填充第二个选择框的 api 调用，我只是这样做

var branch = document.getElementById('branch').value;

并在 API 调用中使用它。

但是在这里，我需要bank.id进行第一个填充选择框的 api 调用，并且仍然将bank.code那里作为表单数据提交。

我曾考虑过key使用具有bank.id. 但无法弄清楚它应该如何工作或以不同的方式工作。

标签： javascriptvue.js

解决方案

解决此问题的一种方法是将整个bank对象绑定到您的<select>模型。

然后您可以使用它id来填充您的其他选择选项，并使用它code来构建您的表单数据有效负载。

例如

<select 
  v-model="selectedBank" 
  id="branch" 
  @change="getbranch"
>
  <option v-for="bank in selectBank" :key="bank.id" :value="bank">{{ 
      bank.name
  }}</option>
</select>

data: () => ({
  formData: {
    // whatever you originally had here
  },
  selectedBank: {} // empty object or perhaps a default bank
}),
methods: {
  getBranch () {
    const bankId = this.selectedBank.id
    // make API call, etc
  },
  submitForm () {
    // build form data
    const formData = {
      ...this.formData,
      account_bank: this.selectedBank.code
    }

    // submit form, etc
  }
}

见https://vuejs.org/v2/guide/forms.html#Value-Bindings

推荐阅读