Question

在mount（）上，我进行了ajax调用，该调用会提取div特定的数据，例如屏幕上的位置。问题是我的自定义方法来设置来自ajax数据的v-bind：style在ajax完成之前运行，因此没有数据可供使用。 ajax完成后设置样式的最佳方法是什么？

Ajax调用返回如下内容： [{name：＆＃39; table1＆＃39;，top：10，left：25}，{name：＆＃39; table2＆＃39;，top：30，left：100}]

＆＃13;

   $(function() {
        var app = new Vue({
            el: '#main',
            data: {
                tables: []
            },
            methods: {
              computeOffsets() {
                  return { top: this.tables.top + 'px', left: this.tables.left+ 'px'}
              }
            },
            mounted() {
                $.ajax({
                    method: 'POST',
                    dataType: 'json',
                    url: base_url + 'tables/getTables/' + event_id
                }).done(data => {
                    console.log(data);
                    this.tables = data;
                });
            }
        });
    });

＆＃13;

.table {
  position: absolute;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="main">
    <div class='table' v-for="table in tables" v-bind:style="computeOffsets()">
        {{table.name}}
    </div>
</div>

＆＃13;

Answer 1

您需要将表作为参数传递给computeOffsets方法。

<div class="table" v-for="table in tables" :style="computeOffsets(table)">
    {{ table.name }}
</div>

computeOffsets(table) {
    return { top: table.top + 'px', left: table.left + 'px' };
}

在Ajax调用之后绑定样式

1 个答案: