Vue 2 v-model 数据不绑定和删除属性答案

【问题标题】：Vue 2 v-model data not binding and removing propertyVue 2 v-model 数据不绑定和删除属性
【发布时间】：2017-01-24 19:59:41
【问题描述】：

我对嵌套数据有一个绑定选择：

    <select class="form-control" v-model="user_profile.sport.sport_id">
      <option v-for="sport in sport_information.sports" :value="sport.sport_id">{{ sport.sport_name }}</option>
    </select>

从 AJAX 调用接收数据。在这种情况下，user_profile.sport.sport_id 是：

{ "sport_id": 2, "name": "Baseball" }

但在加载页面后我失去了 sport_id

{"name": "Baseball" }

我相信这是因为选项值 (sport_information.sports) 也加载了 JSON。因此，当 Vue 尝试绑定 sport_id 值时，select 可能没有值，它会删除该属性。

      this.$parent.callAPI('POST', '/Business/GetSportInformation.ashx', data).then(function (sResponse) {
        self.sport_information = Object.assign({}, sResponse.data)

而callAPI使用vue-resource：

export default {
name: 'App',
data: function () {
  return {
    section: 'Head',
    version: '0.10.0',
    callingAPI: false,
    serverURI: 'http://mywebservice.net/API',
    caller: this.$http
  }
},
methods: {
  callAPI: function (method, url, data) {
    this.callingAPI = true
    url = this.serverURI + url // if no url is passed then inheret local server URI
    return this.caller.post(url, data)
  },

如何在选择中处理 AJAX 源数据的数据绑定？

【问题讨论】：

如何启动 vuejs 实例？它是否知道所有模型属性？
是的，它知道所有的属性和运动默认为 { "sport_id": 0, "name": "" }
您能否在http://www.mocky.io/ 添加一些示例数据并将链接发送给我？然后我可以创建一个演示来查看问题。
你能添加你的代码吗，你是如何定义数据的，Ajax 调用是如何发生的，
好的，抱歉耽搁了。

标签： ajax data-binding vue.js vuejs2 vue-component

【解决方案1】：

填充下拉选项的 API 调用将在将数据绑定到选择的 API 调用之后做出响应。因此，数据绑定到没有选项值的选择，并且从对象中删除了 sport_id 属性。

填充选择选项后，如果我更改选择值，则将 Sport_id 属性读取到具有当前选择值的对象中。

我必须确保在绑定数据之前填充选择，以便页面正确加载表单。

【讨论】：