POSTリクエストでのVuejsとAxiosのv-modelの命名規則（VueオブジェクトをJSONにエンコードする際の問題）

Question

これは長時間続くでしょう！

確かに私は良いフロントエンドのデザイナーではなく、私のJavascriptのスキルは改善の余地があります。

TL：DR - 作業コードは、AxiosのPOSTリクエストに関して、動作しないコードのJSONエンコードデータオブジェクト（商人）とどのように異なっていますか？彼らは同じ結果を出すべきではありませんか？

いくつかの背景が最初にあります：私はLaravel RESTバックエンドを構築しています。これは、機能検証、フォーム検証、ポリシー、作業です。バックエンドをChromeのARC RESTクライアントでテストし、バックエンドが完全に機能していることを確認しました。

問題：Vuejs、Vue-Router、およびAxiosを使用してフロントエンドを設計する際、バックエンドにデータをPOSTする際に問題が発生しています。具体的には、HTTPエラー422でフォームの検証に失敗しています。この問題を、VueまたはAxiosのオブジェクトカプセル化に関連するように絞りました。ここで

は非稼働である Vueのコンポーネント：

<div class="panel panel-default"> 
     <div class="panel-heading">Create Merchant</div> 
     <div class="panel-body"> 
      <form action="#" @submit.prevent="createMerchant()"> 
       Primary 
       <input v-model="merchant.primary" type="text" name="primary" class="form-control" autofocus> 
       Alternate 
       <input v-model="merchant.alternate" type="text" name="alternate" class="form-control"> 
       Contact 
       <input v-model="merchant.contact" type="text" name="contact" class="form-control"> 
       Street 
       <input v-model="merchant.street" type="text" name="street" class="form-control"> 
       City 
       <input v-model="merchant.city" type="text" name="city" class="form-control"> 
       State 
       <input v-model="merchant.state" type="text" name="state" class="form-control"> 
       Country 
       <input v-model="merchant.country" type="text" name="country" class="form-control"> 
       Postal Code 
       <input v-model="merchant.postalCode" type="text" name="postalCode" class="form-control"> 
       <button type="submit" class="btn btn-primary">Create Merchant</button> 
      </form> 
     </div> 
    </div> 

    <div v-if='errors && errors.length' class="panel panel-default"> 
     <div class="panel-heading">Error</div> 
     <div class="panel-body"> 
      <ul> 
       <li v-for='error of errors'> 
        {{error.message}} 
       </li> 
      </ul> 
     </div> 
    </div> 

</div> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      merchant: { 
       primary: '', 
       alternate: '', 
       contact: '', 
       street: '', 
       city: '', 
       state: '', 
       country: '', 
       postalCode: '' 
      }, 
      errors: [] 
     }; 
    }, 

    methods: { 
     createMerchant() { console.log(JSON.stringify(this.merchant)); 
      axios.post('/payment-gateway/public/api/v1/merchant', JSON.stringify(this.merchant)) 
      .then((response) => { 
       console.log(response.data.id); 
       this.$router.push({ name: 'merchantList' }); 
      }) 
      .catch(e => { 
       this.errors.push(e); 
      }); 
     } 
    } 
} 
</script> 

データが掲載されている、私の視点からは正しいように表示されます。

{ "主"： "Widget Company"、 "alternate"： "Widget Co"、 "contact"： "555-555-0055"、 "street"： "123 Main St"、 "city"： "Olympia"、 "state"： "WA "、" country "：" USA "、" postalCode "：" 98501 "}

ただし、上記のコードでは常にHTTP 422エラーが発生します。

今私を混乱させている部分のために、これは働いコードされています

<div class="panel panel-default"> 
     <div class="panel-heading">Create Merchant</div> 
     <div class="panel-body"> 
      <form action="#" @submit.prevent="createMerchant()"> 
       Primary 
       <input v-model="merchant.primary" type="text" name="primary" class="form-control" autofocus> 
       Alternate 
       <input v-model="merchant.alternate" type="text" name="alternate" class="form-control"> 
       Contact 
       <input v-model="merchant.contact" type="text" name="contact" class="form-control"> 
       Street 
       <input v-model="merchant.street" type="text" name="street" class="form-control"> 
       City 
       <input v-model="merchant.city" type="text" name="city" class="form-control"> 
       State 
       <input v-model="merchant.state" type="text" name="state" class="form-control"> 
       Country 
       <input v-model="merchant.country" type="text" name="country" class="form-control"> 
       Postal Code 
       <input v-model="merchant.postalCode" type="text" name="postalCode" class="form-control"> 
       <button type="submit" class="btn btn-primary">Create Merchant</button> 
      </form> 
     </div> 
    </div> 

    <div v-if='errors && errors.length' class="panel panel-default"> 
     <div class="panel-heading">Error</div> 
     <div class="panel-body"> 
      <ul> 
       <li v-for='error of errors'> 
        {{error.message}} 
       </li> 
      </ul> 
     </div> 
    </div> 

</div> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      merchant: { 
       primary: '', 
       alternate: '', 
       contact: '', 
       street: '', 
       city: '', 
       state: '', 
       country: '', 
       postalCode: '' 
      }, 
      errors: [] 
     }; 
    }, 

    methods: { 
     createMerchant() { console.log(JSON.stringify(this.merchant)); 
      axios.post('/payment-gateway/public/api/v1/merchant', { 
       primary: this.merchant.primary, 
       alternate: this.merchant.alternate, 
       contact: this.merchant.contact, 
       street: this.merchant.street, 
       city: this.merchant.city, 
       state: this.merchant.state, 
       country: this.merchant.country, 
       postalCode: this.merchant.postalCode 
      }) 
      .then((response) => { 
       console.log(response.data.id); 
       this.$router.push({ name: 'merchantList' }); 
      }) 
      .catch(e => { 
       this.errors.push(e); 
      }); 
     } 
    } 
} 
</script> 

だから私の質問は、作業コードがでJSONエンコードされたデータオブジェクト（商人）と異なっているか、です動作しないコード？

Answer 1

1つのインスタンスではオブジェクトを送信し、もう1つの文字列ではオブジェクトを送信します。それらは結局文字列として転送されますが、オブジェクトを渡すとContentTypeはフードの下にapplication/jsonに設定されます。

これは、文字列として渡しているものに対してContentTypeをapplication/jsonに設定すると、問題を並べ替えます。