如何在Vue中的对象中传递一个对象？

Question

所以我正在开发一个带有 Rest API 的 Vue 项目，我正在努力在对象中设置一个对象。

我的 vue 页面

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


      <div class="form-group">
        <label for="description">Description</label>
        <input
            class="form-control"
            id="description"
            required
            v-model="party.description"
            name="description"
        />
      </div>
    <div class="form-group">
      <label for="PartyLeaderName">PartyLeader Name</label>
      <input
          class="form-control"
          id="partyLeaderName"
          required
          v-model="party.partyLeaderName"
          name="partyLeaderName"
      />
    </div>

      <button @click="saveParty" class="btn btn-success">Submit</button>
    <p>{{message}}</p>

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


<script>
import PartyDataService from "@/services/PartyDataService";
import PartyLeaderDataService from "../../services/PartyLeaderDataService";

export default {
  name: "AddParty",
  data() {
    return {
      party: {
        id: null,
        name: "",
        description: "",
        ispartynational: true,
        partyLeader:{}
      },
      message:""
    };
  },
  methods: {
    saveParty() {
      var data = {
        name: this.party.name,
        description: this.party.description,
        ispartynational: true,
        partyLeader: this.party.partyLeader
      };
      PartyLeaderDataService.findByName("Marije")
          .then(response => {
            this.party.partyLeader = response.data.partyLeader;
            console.log(response.data);//partyleader json correct
          })
          .catch(e => {
            console.log(e);
          });
      console.log(data)
      PartyDataService.create(data)
          .then(response => {
            this.party.id = response.data.id;
            console.log(response.data);
            this.message = 'The Party was created successfully!';
          })
          .catch(e => {
            console.log(e);
          });

    },
    newParty() {
      this.party = {};
    },
  }
}
</script>
<style>
.submit-form {
  max-width: 300px;
  margin: auto;}

</style>

问题是在这部分代码中：

data() {
    return {
      party: {
        id: null,
        name: "",
        description: "",
        ispartynational: true,
        partyLeader:{}
      },

数据的格式应该是这样的：

除了partyLeader 属性外，所有格式都正确，这不会像邮递员示例中那样设置。 我已经得到了以下代码：

  PartyLeaderDataService.findByName("Marije")
      .then(response => {
        this.party.partyLeader = response.data;
        console.log(response.data);//partyleader json correct
      })
      .catch(e => {
        console.log(e);
      });

我的控制台日志显示这段代码的输出是这样的：

{id: 6, name: "Marije", appearance: "Link"}

这是我想要的。现在的问题是我如何将它传递给 partyLeader 属性？ 提前致谢！

已添加

当我把代码改成这样时：

  PartyLeaderDataService.findByName("Marije")
          .then(response => {
            console.log(response.data)  //{id: 6, name: "Marije", appearance: "Link"}
            this.party.partyLeader = response.data;
            console.log(response.data);  //{__ob__: Observer}
          })
          .catch(e => {
            console.log(e);
          });

我不知道为什么

更新

所以现在我有了它，所以输出是这样的：

但好像和这个不一样：

 {
        "id": 5,
        "name": "Visual",
        "description": "new party",
        "ispartynational": true,
        "partyLeader": {
            "id": 5,
            "name": "Marijke",
            "appearance": "Link of image"
        }
 }

如何使它像邮递员格式（只有partyLeader格式错误）？

Answer 1

当您将this.party.partyLeader 的值设置为等于response.data 时，它变为可观察的。要改为将 this.party.partyLeader 的值设置为 response.data 的当前值，请尝试使用扩展运算符创建一个新对象，如下所示：

this.party.partyLeader = {...response.data};