Vueコンポーネント内でAjaxデータを使用する

Question

vueコンポーネントにエクスポートしようとしたときに機能が停止しました。

テンプレート内で配列が空のため、コンポーネントがテンプレートをレンダリングするときにajaxが使用できないことがほとんどあります。

ajaxがロードされるまで、レンダリングを遅らせる方法は誰にでも見られますか？

多分私は間違った木を鳴らしています。データは、ajax .done（）コールバックで利用できます。

<template> 

     <div v-for="item in filteredItems" @mouseover="activate" @mouseout="deactivate" @click="openlink" class="item" :data-link="item.link"> 
     <div class="vline"></div> 
     <div class="details"> 
      <div class="top"> 
      <div class="media">{{item.sectors}}</div> 
      <div class="title">{{item.title}}</div> 
      </div> 
      <div class="description">{{item.description}}</div> 
       </div> 
       <div class="img"> 
        <div class="overlay"><a class="button" v-bind:href="'featured/'+item.link">View project <span class="plus"><span>[</span><span>+</span><span>]</span></span></a></div> 
        <div v-if="context == 'home'"> 
        <img class="workimg" v-bind:src="item.imagemobile"> 
        </div> 
        <div v-else> 
        <img class="workimg" v-bind:src="item.imagemobile"> 
        </div> 


       </div> 
    </div> 
    </div> 


</template> 

    <script> 
export default { 
    props: ['context'], 
    data() { 
      return { 
      work: [], 
      } 

    }, 


      computed: { 

    filteredItems: function() { 
    if (this.context == 'home') { 
    return this.work.filter(function (works) { return works}); 
    } 
    else { 
     return this.work.filter(function (works) { return works}); 
    } 
    }, 




}, 
    mounted() { 

    self= this; 
    $.ajax({ 
    method: "GET", 
    url: "/work.json", 
}) 
.done(function(data){ 
    self.work = data; 
    console.log(self.work); 
// work has data! 

    }) 
    .fail(function(xhr, status, error) { 
     console.log(error) 
    }); 

    } 

    } 


</script> 

---

編集：矢印構文は、それが働いてますよう

それはAjaxの機能で、この/自己の使用されている必要があり、これが正しいに見えるので、これは奇妙です。

$.ajax({ 
     method: 'GET', 
     url: '/work.json' 
     }) 
     .done(data => { 

     this.work = data; 

     }) 
     .fail((xhr, status, error) => { 

     }) 

Answer 1

要求が行われるまで、レンダリング隠すための古典的な方法は、あなたのdataにisLoadingプロパティを追加することです。私はarrow functionを使用しているので、適切なコンテキストにアクセスできます。

<template> 
    <div> 
    <p v-if="failed">Request failed</p> 
    <p v-else-if="isLoading">Loading...</p> 
    <div v-else> 
     <!-- your content here --> 
    </div> 
    </div> 
</template> 

<script> 
export default { 
    data() { 
    return { 
     isLoading: false, 
     failed: false, 
     work: [] 
    } 
    }, 

    mounted() { 
    this.isLoading = true 
    $.ajax({ 
     method: 'GET', 
     url: '/work.json' 
    }) 
    .done(data => { 
     this.isLoading = false 
     this.work = data 
    }) 
    .fail((xhr, status, error) => { 
     this.loading = false 
     this.failed = true 
    }) 
    } 
} 
</script> 

しかし、いくつかの質問：

• どのアプリでのjQueryを登録していますか？
• あなたは純粋なXMLHttpRequestの使用について考えましたか？またはさらに良いwith promises？
• vue-resourceを使ってみましたか？