Vue 2 v模型数据没有绑定和删除属性-Java 学习之路

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

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

1 回答

0

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

填充选择选项后，如果我更改选择值，则sport_id属性将使用select的当前值读回到对象 .

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

回复于 2024-05-07T02:28:28+08:00

Vue 2 v模型数据没有绑定和删除属性

1 回答

相关问题