spring-boot - Vue数据区分同名的不同id

Question

所以我试图在vue中做这个post方法：

问题是以下代码：

我的Vue页面：

<template>
  <div class="submit-form">
    <div class="form-group">
      <label for="coalition">Coalition Name</label>
      <input
          class="form-control"
          id="coalition"
          required
          v-model="coalition.name"
          name="coalition"
      />
    </div>


    <div class="form-group">
      <label for="date">Date</label>
      <input
          type="date"
          id="date"
          required
          v-model="coalition.date"
          name="description"
      />
    </div>
    
    <button @click="saveCoalition" class="btn btn-success">Submit</button>
    <p>{{message}}</p>

    <!--    <div>-->
    <!--      <button class="btn btn-success" @click="newParty">Add</button>-->
    <!--    </div>-->
  </div>
</template>

<script>
import CoalitionDataService from "../../services/CoalitionDataService";
import jwt_decode from "jwt-decode";
import HomeDataService from "../../services/HomeDataService";
export default {
  name: "AddCoalition",
  data() {
    return {
      coalition: {
        id: null,
        name: "",
        date: "",
        account: {
          id: ""
        }
      },
      message:""
    };
  },
  methods: {
    getUserId(){
      //Retrieve JSON WEB TOKEN
      try {
        var token = localStorage.getItem("Authorization")
        var decoded = jwt_decode(token);
        var username = decoded[Object.keys(decoded)[0]];
        HomeDataService.getId(username)
            .then(response => {
              this.coalition.account.id = response.data.id;
              console.log(response.data.id)
            })
      }
      catch (e){
        console.log("No user is logged in")
      }
      return this.coalition.account.id
    },
  saveCoalition() {
    var data = {

      name: this.coalition.name,
      description: this.coalition.description,
      date: this.coalition.date,
      account: {
        id: this.getUserId()
      }
    };

    CoalitionDataService.create(data)
        .then(response => {
          this.coalition.id = response.data.id;
          console.log(response.data);
          this.message = 'The Coalition was created successfully!';
        })
        .catch(e => {
          console.log(e);
        });
  },

  newParty() {
    this.coalition = {};
  }
}
}

问题是程序无法区分我得出这个结论coalition.account.id的正常值coalition.id ，因为当我单击 id 时，另一个 Id 也会突出显示，就像它们是相同的 id 一样（但它们不应该是）。

我找不到解决此问题的方法。谁能帮我在vue中从邮递员那里发帖？谢谢！

笔记：

给出了想要的console.log(response.data.id)值，这样就可以按照我想要的方式工作。

标签： spring-bootvue.jspostone-to-many