Question

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

    <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-resourse：

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源数据的数据绑定？

Answer 1

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

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

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

Vue 2 v模型数据未绑定并删除属性

1 个答案: