将vue js中的DropDown列表中的选定值添加到数据库

Question

问题是，我无法将 DropDown 列表（在 vue js 中）中的选定值添加到数组以将其保存在数据库中，但我可以获取该值并将其传递给警报以进行测试，这是代码：

  <table class="table table-stripped table-border">
    <thead>
      <tr>
        <th>#</th>
        <th>Drug</th>
        <th>Milligram</th>
        <th>Box</th>
        <th>Total</th>
        <th>Drugstore Name</th>
        <th>Drugstore Address</th>
        <th>Drugstore PS.code</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in requestItems" :key="index">
        <td>{{ index + 1 }}</td>
        <td>
          <select
            name="drugCode"
            @change="onDrugChange($event)"
            class="form-control"
          >
            <option selected>--Drug--</option>
            <option
              v-for="item in drugs"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </option>
          </select>
        </td>
        <td>
          <input
            type="number"
            v-model="item.milligram"
            class="form-control"
          />
        </td>
        <td>
          <input
            type="number"
            v-model="item.box"
            class="form-control"
          />
        </td>
        <td>
          <input
            type="number"
            v-model="item.total"
            class="form-control"
          />
        </td>
        <td>
          <input
            type="text"
            class="form-control"
            v-model="item.drugStoreName"
            :readonly="patients.isElga"
          />
        </td>
        <td>
          <input
            type="text"
            class="form-control"
            v-model="item.drugStoreAddress"
            :readonly="patients.isElga"
          />
        </td>
        <td>
          <input
            type="text"
            class="form-control"
            v-model="item.drugStorePostalCode"
            :readonly="patients.isElga"
          />
        </td>
        <td>
          <button
            type="button"
            @click="deleteRequestItemRow(index)"
            class="btn btn-sm btn-danger"
          >
            -
          </button>
        </td>
      </tr>
    </tbody>
  </table>

这是数据

  data() {
    return {
      patients: {
        id: 0,
        fullName: "",
        telephone: "",
        email: "",
        birthDate: "",
        isElga: true,
      },
      drugs: {
        id: 0,
        name: "",
      },
      requestItems: [
        {
          drugCode: 0,
          milligram: 0,
          box: 0,
          total: 0,
          drugStoreName: "",
          drugStoreAddress: "",
          drugStorePostalCode: "",
        },
      ],
    };
  },

这是方法：

  methods: {
    onDrugChange(event) {
      this.requestItems.drugCode = event.target.value;
      console.log(this.requestItems.drugCode);
    },
    async insertRequest() {
      if (this.checkValidation()) {
        let result = await axios
          .post("https://localhost:44313/api/request", {
            patientDetails: this.patients,
            patientRequests: this.requestItems,
          })

        if (result.status == 201) {
          this.$router.push("/");
          Swal.fire(
            "Your request has been sent, the reply will be soon sent to your email."
          );
        }
      }
    },
    async getDrugs() {
      let result = await axios.get("https://localhost:44313/api/drug");
      this.drugs = result.data;
    },

提交后结果是这样的：

添加了所有 requestItems 的字段，除了 DrugCode 为 0。

Answer 1

问题是您没有设置 requestItems 中需要更新的项目的索引。在 this.requestItems.drugCode = event.target.value; 这一行实际上应该是 this.requestItems[index].drugCode = event.target.value;

尝试将代码更正为

<select
  :id="`drugCode_${index}`"
  name="drugCode"
  @change="onDrugChange($event)"
  class="form-control"
  >
  <option selected>--Drug--</option>
  <option
    v-for="item in drugs"
    :key="item.id"
    :value="item.id"
  >
  {{ item.name }}
  </option>
</select>

然后是方法

onDrugChange(event) {
  const src = event.target.id // This should give you the id of the select that has fired the event
  const index = parseInt(src.replace('drugCode', ''))
  this.requestItems[index].drugCode = event.target.value;
  console.log(this.requestItems[index].drugCode);
},

为了更好的理解，我做了一个代码笔：https://codepen.io/aaha/pen/WNxMyBm?editors=1010

将vue js中的DropDown列表中的选定值添加到数据库

Adding the selected value from DropDown list in vue js to database

vue.js

vue-router

vuex

vuejs2

vuetify.js