Question

我试图使用相同的表格进行创建和编辑。我已经将带有道具的ID从一个组件传递到了另一个组件，并且工作正常。我使用该ID尝试在getter的帮助下从vuex存储状态获取数据。吸气剂正确返回了数据。但是我不能填写表格。我已经尝试过创建，计算和安装属性，但是我无法正常工作。

我曾尝试使用mount，create和calculated填充表单。

我希望当我单击“编辑”按钮时，将填充表单的输出，但是在表单中什么也看不到。

模板代码

<template>
    <b-form-group
    label-cols="12"          
    label="Minimum Salary: "
    >
        <b-form-input
              id="input-1"
              v-model="record.min_salary"
              type="number"
            ></b-form-input>
    </b-form-group>

          <b-form-group
            label-cols="12"
            label-cols-lg="3"
            label-for="input-2"
            label="Maximum Salary: "
            label-align-sm="right"
            label-align="left"
          >
            <b-form-input
              id="input-2"
              v-model="record.max_salary"
              type="number"
            ></b-form-input>
          </b-form-group>

          <b-form-group
            label-cols="12"
            label-cols-lg="3"
            label-for="input-2"
            label="Tax Rate: "
            label-align-sm="right"
            label-align="left"
          >
            <b-form-input
              id="input-2"
              v-model="record.tax_rate"
              type="number"
            ></b-form-input>
          </b-form-group>
          <b-form-group
            label-cols="12"
            label-cols-lg="3"
            label-for="input-2"
            label="Deductible: "
            label-align-sm="right"
            label-align="left"
          >
            <b-form-input
              id="input-2"
              v-model="record.deductible"
              type="number"
            ></b-form-input>
          </b-form-group>
          </b-form>
    </template>

Vue脚本代码

<script>
    import { mapGetters, mapActions } from "vuex";
    export default {
      props: ["id"],
      data: () => ({
      update: false,
        record: {
          min_salary: "",
          max_salary: "",
          tax_rate: "",
          deductible: ""
       }
      }),

      created() {
        if (this.id != null) {
          this.update = true;
          this.fetchIncomeTaxRate(this.id);
          this.createoredit = "EDIT";
        }
      },
      mounted() {
         if (this.id != null) {
          this.record.min_salary = this.getIncomeTaxRate.min_salary;
          this.record.max_salary = this.getIncomeTaxRate.max_salary;
          this.record.tax_rate = this.getIncomeTaxRate.tax_rate;
          this.record.deductible = this.getIncomeTaxRate.deductible;
       }
      },
      methods: { ...mapActions(["fetchIncomeTaxRate"])},
      computed: {...mapGetters(["getIncomeTaxRate"])}
     };
</script>

商店代码

import axios from "axios";
import commonAPI from "../commonAPI";

const state = {
  incomeTaxRate: []
};

const mutations = {

  setIncomeTaxRate: (state, incomeTaxRate) =>
    (state.incomeTaxRate = incomeTaxRate)
};

const getters = {
  getIncomeTaxRate: state => {
    return state.incomeTaxRate;
  }
};

const actions = {
  async fetchIncomeTaxRate({ commit }, id) {
    const response = await axios.get(
      commonAPI.PAYROLL_BASE_URL + `/income-tax-rates/${id}`
    );
    commit("setIncomeTaxRate", response.data);
  }
};

export default {
  state,
  mutations,
  getters,
  actions
};

Answer 1

在没有看到商店代码的情况下给出具体答案有些困难，但是您将不得不等到商店完成数据提取后再尝试将其读入表单。

最简单的方法可能是使用fetchIncomeTaxRate返回的Promise。所有actions被调用时都会返回一个Promise，即使您自己不返回一个。确保您返回的是合适的Promise，即直到加载数据后才解决的Promise。如果使用支持Promises的库（例如axios）加载数据，那么这应该很容易，您只需要将它返回的Promise退还给您即可。

返回适当的承诺后，您可以执行以下操作：

this.fetchIncomeTaxRate(this.id).then(() => {
    this.record.min_salary = this.getIncomeTaxRate.min_salary;
    // ... others here
});

您可能希望添加其他代码，以防止在填充相关数据之前查看/编辑表单。

使用Promises的替代方法是使用watch等待getIncomeTaxRate进行更改。但是，很难确保仅对正确的更改做出反应。

更新：

现在您已经发布了商店代码，我已经尝试自己运行代码（尽可能接近），如果我按照概述的方式使用record，then的更新就可以了以上。这很可能表明您发布的代码中没有另一个问题。例如，从服务器返回的数据可能与您期望的格式不完全相同。

为进一步诊断，我建议放置一些控制台日志。对于初学者，我将其放在then的顶部：

this.fetchIncomeTaxRate(this.id).then(() => {
    console.log('in then', this.getIncomeTaxRate, this.getIncomeTaxRate.min_salary);

    this.record.min_salary = this.getIncomeTaxRate.min_salary;
    // ... others here
});

我也会在fetchIncomeTaxRate中放一些：

async fetchIncomeTaxRate({ commit }, id) {
  console.log('called fetchIncomeTaxRate');

  const response = await axios.get(
    commonAPI.PAYROLL_BASE_URL + `/income-tax-rates/${id}`
  );
  commit("setIncomeTaxRate", response.data);

  console.log('committed', response.data);
}

不仅记录值正确，而且记录消息的顺序也很重要。数据应在调用then之前提交。

如何使用getters从vuex返回的商店状态数据中填充表单？

1 个答案: