POST 请求中 Vuejs 和 Axios 的 v-model 命名约定（将 Vue 对象编码为 JSON 的问题）

Question

这将是超级长篇大论！

诚然，我不是一个好的前端设计师，我的 Javascript 技能还有很多需要改进的地方。

TL:DR - 关于 Axios，工作代码与非工作代码中的 JSON 编码数据对象（商家）有何不同POST请求？他们不应该产生相同的结果吗？

先介绍一些背景知识：我正在构建一个 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>

我认为发布的数据似乎是正确的：

{"primary":"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

在一个实例中，您发送的是一个对象，而在另一个实例中，您发送的是一个字符串。尽管它们最终都将作为字符串传输，但当您传递对象时，ContentType 在后台设置为 application/json.

也就是说，如果您将作为字符串传递的对象的 ContentType 设置为 application/json，它将对问题进行排序。

POST 请求中 Vuejs 和 Axios 的 v-model 命名约定（将 Vue 对象编码为 JSON 的问题）

Naming convention of v-model for Vuejs and Axios in a POST request (Issues encoding a Vue Object into JSON)

laravel

vue.js

axios