Question

我有一个$ .ajax（）函数正常工作并返回一个结果，我想我做了数据绑定所需的一切，以便顺利进行。

基本上在页面加载时，来自$ .ajax（）的数据被附加到表中，但问题是数据没有像它应该的那样追加。我错过了什么吗？

HTML：

    <div class="row">
    <div class="col-md-12 overflow-table">
        <table class="table" id="table">
            <thead class="head-color thead-inverse">
                <tr>
                    <th style="border-top-left-radius: 10px; border-left:1px solid transparent;">NAME</th>
                    <th>CLIENT-ID</th>
                    <th>URL</th>
                    <th style="border-top-right-radius: 10px; border-right:1px solid transparent;">ACTIONS</th>
                </tr>
            </thead>
            <tbody id='table-redirect'>
                <tr class='lightgrey'>
                    <td contenteditable="true">{{ agr.name }}</td>
                    <td>{{ agr.client_id }}</td>
                    <td contenteditable="true">{{ agr.url }}</td>
                    <td>
                        <img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
                    </td>
                </tr>
                <tr class='lightgrey'>
                    <td contenteditable="true">{{ agr.name }}</td>
                    <td>{{ agr.client_id }}</td>
                    <td contenteditable="true">{{ agr.url }}</td>
                    <td>
                        <img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
                    </td>
                </tr>
                <tr class='lightgrey'>
                    <td contenteditable="true">{{ agr.name }}</td>
                    <td>{{ agr.client_id }}</td>
                    <td contenteditable="true">{{ agr.url }}</td>
                    <td>
                        <img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
                    </td>
                </tr>
                <tr class='lightgrey'>
                    <td contenteditable="true">{{ agr.name }}</td>
                    <td>{{ agr.client_id }}</td>
                    <td contenteditable="true">{{ agr.url }}</td>
                    <td>
                        <img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

JAVASCRIPT：

    //VARIABLES

    var url = "http://mobisteinlp.com/redirect/redirect";
    agr = 0;

    //VUE.JS REDIRECT VIEW MODEL

    var redirect = new Vue({
        el: '#redirect',
        data: {
            agr1: []
        },
        mounted() {
            this.getAll(); //DISPLAY TABLE ON PAGE LOAD
        },
        methods: {
            //
            getAll: function() {
                var self = this;
                console.log('teste');
                $.ajax({
                    url: url + "/getAll",
                    type: "POST",
                    dataType: "json",
                    success: function(response) {
                        console.log(response); // 
                        self.agr1 = response;
                        console.log(self.agr1);
                        console.log('success!');
                    },
                    error: function() {
                            console.log('error');
                        } //end error function 
                }); //end $.ajax() request 
            }, //end getAll function
        } //end methods
    }) //end vue.js instance

Answer 1

您已在数据属性中初始化了属性arg1，它是一个数组[]，如下所示：

data: { 
    agr1: [ ] 
}

在您的ajax cal中，您将arg1的值分配给响应，如下所示：

  self.agr1 = response;

因此假设响应是一个对象数组（在您的情况下是客户端）。由于未提供完整信息，请尝试：

<tbody id='table-redirect'>
    <tr v-for="arg in arg1" class='lightgrey'>
        <td contenteditable="true">{{ agr.name }}</td>
        <td>{{ agr.client_id }}</td>
        <td contenteditable="true">{{ agr.url }}</td>
        <td>
            <img src="http://mobisteinlp.com/redirect/public/img/edit.svg"><a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'><img src="http://mobisteinlp.com/redirect/public/img/copy.svg"></a>
        </td>
    </tr>
</tbody>

来自$ .ajax（）的vue.js数据请求不绑定到表

1 个答案: