如何使用 Vue.js 显示这个？ [关闭]答案

【问题标题】：How to display this using Vue.js? [closed]如何使用 Vue.js 显示这个？ [关闭]
【发布时间】：2018-04-08 22:42:41
【问题描述】：

{ message: "Hello how are you", status: false, state: Kerala }

以下值是 AJAX 请求的响应。每次响应都会发生变化。我需要使用 Vue.js 打印它吗？

<script>
regBox = new Vue({
    el: "#regBox",
    data: {
        username : '',
    },
    methods: {
        handelSubmit: function(e) {
            data = {};
            data['username'] = this.username;
            $.ajax({
                url: 'https://herokuapp.com/api/user/box/',
                data: data,
                type: "POST",
                dataType: 'json',
                success: function(e) {
                    if (e.status) {
                        alert(" Success")
                    } else {
                        alert("failed");
                    }
                }
            });
            return false;
        }
    },
});
</script>

【问题讨论】：

也许这个问题中的评论演示会有所帮助：stackoverflow.com/questions/46927074/…
我没有同样的想法

标签： javascript php html vue.js

【解决方案1】：

示例 #1：一次只有一个响应

regBox = new Vue({
el: "#regBox",
data: {
    username : '',
    response: {
        message: '',
        status: '',
        state: ''
    }
},
methods: {
    handelSubmit: function(e) {
        var vm = this; // so you can access "this" inside jquery success
        data = {};
        data['username'] = this.username;
        $.ajax({
            url: 'https://herokuapp.com/api/user/box/',
            data: data,
            type: "POST",
            dataType: 'json',
            success: function(e) {
                vm.response = e;
            }
        });
        return false;
    }
},
});

示例模板：

<div id="regBox">
   <div v-if="response.message" class="{ 'alert-success': response.status, 'alert-danger': !response.status}">
       <p>{{ response.message }}</p>
    </div>
</div>

示例 #2：一次多个响应：

regBox = new Vue({
el: "#regBox",
data: {
    username : '',
    responses: []
},
methods: {
    handelSubmit: function(e) {
        data = {};
        data['username'] = this.username;
        $.ajax({
            url: 'https://herokuapp.com/api/user/box/',
            data: data,
            type: "POST",
            dataType: 'json',
            success: function(e) {

                // like this to prevent all items to be binded, they would otherwise change whenever you get a new response.
                vm.responses.push({
                   message: e.message,
                   status: e.status,
                   state: e.state
                });
            }
        });
        return false;
    }
},
});

示例模板：

<div id="regBox">
   <div class="{ 'alert-success': response.status, 'alert-danger': !response.status}" v-for="response in responses">
       <p>{{ response.message }}</p>
    </div>
</div>

之后，如果您想在一段时间后移除响应，也可以使用 setTimeout。

【讨论】：

还有在前端怎么显示？
嘿@Wanderer 我用模板更新了我的答案，这只是一个例子。如果你根本不知道如何在 vueJs 中显示数据，我建议你先做一些教程。 (laracasts.com/series/learn-vue-2-step-by-step)

【解决方案2】：

我从$.ajax 看到您正在将 vue.js 与 jquery 混合使用，应尽可能避免使用。您可以为您的 AJAX 请求使用不同的库，例如 axios。

下面是使用 axios 和 vue.js 的解释： https://alligator.io/vuejs/rest-api-axios/

【讨论】：