Javascript 在vue中设置整个data（）对象以填充表单

我有来自mongodb的数据，我通过这种方式获取数据，并在客户端接收数据

error_reporting(E_ALL);
ini_set('display_errors', '1');

require '../vendor/autoload.php';

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Max-Age: 1000");
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding");
header("Access-Control-Allow-Methods: PUT, POST, GET, OPTIONS, DELETE");


$client = new MongoDB\Client("mongodb://localhost:27017");
$collection = $client->hotel->airlines;


$cursor = $collection->find();

echo json_encode(iterator_to_array($cursor));

这是我从服务器获取的数据示例

[{
    "_id": {
        "$oid": "609c51803d59e5004f225a92"
    },
    "added_by": "609c35b4f940b04db90a7222",
    "airline_category": "regional",
    "airline_alliance_category": "star_alliance",
    "airline_logo": [{
        "url": ""
    }],
    "airline_status": "active",
    "airline_summary": "Delta Flies",
    "airline_contact_details": "Delta Flies",
    "airline_name": "Delta",
    "airline_code": "Delta",
    "airline_home_airport": "Denver",
    "airline_office_address": "Dever",
    "airline_country": "United States",
    "airline_city": "Deenver",
    "airline_region": "North West",
    "airline_telephone_number": "Delta Flies",
    "airline_email_address": "Delta Flies",
    "airline_website": "Delta Flies"
}, {
    "_id": {
        "$oid": "609c51cc6059021c31781242"
    },
    "added_by": "609c35b4f940b04db90a7222",
    "airline_category": "regional",
    "airline_alliance_category": "star_alliance",
    "airline_logo": [{
        "url": ""
    }],
    "airline_status": "active",
    "airline_summary": "Delta Flies",
    "airline_contact_details": "Delta Flies",
    "airline_name": "Delta",
    "airline_code": "Delta",
    "airline_home_airport": "Denver",
    "airline_office_address": "Dever",
    "airline_country": "United States",
    "airline_city": "Deenver",
    "airline_region": "North West",
    "airline_telephone_number": "Delta Flies",
    "airline_email_address": "Delta Flies",
    "airline_website": "Delta Flies"
}, {
    "_id": {
        "$oid": "609c51d91833cc79af668d32"
    },
    "added_by": "609c35b4f940b04db90a7222",
    "airline_category": "regional",
    "airline_alliance_category": "star_alliance",
    "airline_logo": [{
        "url": "\/var\/www\/html\/uploads\/609c51d51227f.jpg"
    }],
    "airline_status": "active",
    "airline_summary": "Delta Flies",
    "airline_contact_details": "Delta Flies",
    "airline_name": "Delta",
    "airline_code": "Delta",
    "airline_home_airport": "Denver",
    "airline_office_address": "Dever",
    "airline_country": "United States",
    "airline_city": "Deenver",
    "airline_region": "North West",
    "airline_telephone_number": "Delta Flies",
    "airline_email_address": "Delta Flies",
    "airline_website": "Delta Flies"
}]

在客户端，客户端数据变量如下所示

export default {
  name: 'Seed_Airlines',
  data() {
    return {
    airlineForm:{},
    added_by:'',
    allusersfetched:'',
    airline_name:'',
    airline_code:'',
    airline_category:'',
    airline_alliance_category:'',
    airline_home_airport:'',
    airline_logo:'',
    airline_status:'',
    airline_office_address:'',
    airline_country:'',
    airline_city:'',
    airline_region:'',
    airline_summary:'',
    airline_contact_details:'',
    allairportsfetched:'',
    record_id:'',
    fetchedid:'',
        }
    },

在我的系统中，我调用此代码

axios.get(fetch_all_airlines)
            .then(response => {   
                console.log(response.data);
                var data = response.data;
                    this.data = data
            })
            .catch(e => {
                this.errors.push(e)
            }); 
    

由于返回了数据，因此包含一个隐藏的id字段

"_id": {
        "$oid": "609c51803d59e5004f225a92"
    },  

我想去掉

“\u id:{

和另一个

}

并留下

“$oid”：“609c51803d59e5004f225a92”

作为数据对象的一部分

---

我如何设置整个返回的数据对象来填充我的表单，因为它与我最初用于将数据插入mongo的数据对象完全匹配？

最简单的解决方案是修改

data（）

方法，使其如下所示：

data() {
   return {
       apiData: {
           ...yourListOfPropertiesWillBeHere
       }
   }
}

axios.get(fetch_all_airlines)
  .then(response => {   
    this.apiData = { ...response.data };
  })
  .catch(e => {
    this.errors.push(e)
  }); 

axios.get(fetch_all_airlines)
  .then(response => {   

    const airlines = response.data.map(value => {
        const airline = return {
            ...value,
            "$oid": value._id["$oid"]
        }
        delete airline._id;
        return airline;
    });

    this.apiData = airlines;

  })
  .catch(e => {
    this.errors.push(e)
  }); 

基本上，通过将所有属性向下嵌套一级，将更容易避免Vue无法检测到的更改

然后，在API调用中，您将执行以下操作：

data() {
   return {
       apiData: {
           ...yourListOfPropertiesWillBeHere
       }
   }
}

axios.get(fetch_all_airlines)
  .then(response => {   
    this.apiData = { ...response.data };
  })
  .catch(e => {
    this.errors.push(e)
  }); 

axios.get(fetch_all_airlines)
  .then(response => {   

    const airlines = response.data.map(value => {
        const airline = return {
            ...value,
            "$oid": value._id["$oid"]
        }
        delete airline._id;
        return airline;
    });

    this.apiData = airlines;

  })
  .catch(e => {
    this.errors.push(e)
  }); 

另外，要去除

\u id

，您可以这样做：

data() {
   return {
       apiData: {
           ...yourListOfPropertiesWillBeHere
       }
   }
}

axios.get(fetch_all_airlines)
  .then(response => {   
    this.apiData = { ...response.data };
  })
  .catch(e => {
    this.errors.push(e)
  }); 

axios.get(fetch_all_airlines)
  .then(response => {   

    const airlines = response.data.map(value => {
        const airline = return {
            ...value,
            "$oid": value._id["$oid"]
        }
        delete airline._id;
        return airline;
    });

    this.apiData = airlines;

  })
  .catch(e => {
    this.errors.push(e)
  }); 

---

如果我想访问

apiData.airline\u name

的v-model项，则会出现一个问题。发送到服务器的对象应该有一个键名，例如

apiData.airline\u name

，这在mongodb中是一个n错误。有没有一个解决方案，让这个关键的名字没有点。你能给我看看后的要求吗？或者一些后端代码，mongodb的问题在哪里？我已经解决了。我将apiData.airline\u name仅放在v-model上，而不放在名称上。但是，在post上，我无法捕获apiData作为对象的一部分，只有对象中的数据我认为对象是持久化的，所以我将其存储在mongodb中，就像这样，但我仍然得到了非嵌套结果我们重新排列oid的代码不正确，但是将反应变量保存在一个包含对象中的概念是正确的。我刚刚获取了id值response.data.id.$oid，并将其设置在一个隐藏字段中，然后将其发布到服务器，准备保存（）或更新。