在POST请求中Vuejs和Axios的v模型命名约定(将Vue对象编码为JSON的问题)

Question

这将是超长的喘息！

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

TL：博士-在Axios POST请求方面，工作代码与非工作代码中的JSON编码数据对象(商人)有什么不同？难道他们不应该产生同样的结果吗？

一些背景第一:我正在构建一个Laravel休息后端，是功能完成，表单验证器，策略，工程。我已经用Chrome的ARC REST客户端测试了后端，并验证了我的后端是完全功能的。

问题是:在使用Vuejs、Vue-路由器和Axios设计我的前端时，我的后端存在POSTing数据问题。具体来说，它的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>

在我看来，正在公布的数据似乎是正确的：

{“主要”：“寡妇公司”，“备用”：“寡妇公司”，“联系”：“555-555-0055”，“街道”：“123号主要街道”，“城市”：“奥林匹亚”，“国家”：“WA”，“国家”：“美国”，"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作为字符串，它将对问题进行排序。