Ajax呼び出し後のバインドスタイル

Question

mounted（）には、画面上の位置などのdiv固有のデータを取得するajax呼び出しを行います。問題は、ajaxデータのv-bind：styleを設定する私のカスタムメソッドが、ajaxが終了する前に実行されるため、そこからデータを取り出すことができないということです。何がAjaxが完了した後に私のスタイルを設定するための最良の方法は何ですか？ ：

AJAX呼び出しがこのような何かを返す[{名： 'TABLE1'、トップ10は、左：25}、{名： '表2'、トップ30には、左：100}]

$(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; 
 
       }); 
 
      } 
 
     }); 
 
    });

.table { 
 
    position: absolute; 
 
}

<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>

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' }; 
}