APIからの約束を返すと、グローバルデータの中に入れて

Question

申し訳

私はAPIからいくつかのデータを取得してから入れしようとしていますそのデータをグローバルオブジェクトに格納して、いくつかの子コンポーネントに渡すことができます。

グローバルプロジェクトオブジェクトにデータを設定することはできませんが、未定義を返すか、約束を返します。

親 -

<template> 
    <div id="app"> 
    <section class="intro"> 
     <h1>WELCOME</h1> 
    </section> 
     <transition name="fade"> <router-view class="view" :computedProjects=computedProject ></router-view></transition> 
    </div> 
</template> 
<script> 



import projectsList from './components/projectsList' 


var client = contentful.createClient({ 
    // This is the space ID. A space is like a project folder in Contentful terms 
    space: '', 
    // This is the access token for this space. Normally you get both ID and the token in the Contentful web app 
    accessToken: '', 
}) 

var PRODUCT_CONTENT_TYPE_ID = 'project' 

export default { 
    name: 'app', 
    components: { 
    projectsList 
    }, 
    data: function() { 
     return { 
     users:'', 
     projects:'', 

     } 
    }, 

methods: {}, 
created : function() { 
    client.getEntries().then((response) => { 
    console.log(response) 
    this.projects = response 
    console.log(this.projects) 
    return response 
    }); 
}, 
computed: { 
    computedProject: function() { 
    if (!this.projects) return null; 
    return this.projects; 
    } 
} 


} 
    } 

子---

<template> 
<section class="project-list"> 
     <swiper :options="swiperOption"> 
     <swiper-slide v-for="project in projects" v-bind:ref="'project' + project.name" :key="project.name" data-swiper-parallax="-100"> 
      <div class="project-cover wrapper"> 
       {{project.name}} 
       <router-link :to="{ name: 'project', params: { id: project.name }}"> 
        <div class="cover-img" :style="{ 'background-image': 'url(../static/img/projects/'+project.name+'/'+'project-details-header.jpg)' }"> </div> 

        <div class="project-copy"></div> 
        <div href="#" class="tilter tilter--4"> 
         <figure class="tilter__figure"> 
          <img class="tilter__image" :src="'+project.fields.coverImage.fields.file.url+'" alt="" /> 
          <div class="tilter__deco tilter__deco--shine"></div> 
          <div class="tilter__deco tilter__deco--overlay" v-bind:style="{ backgroundImage: project.gradient }"></div> 
          <figcaption class="tilter__caption"> 
           <h1 class="projectName tilter__title title">{{project.name}}</h1> 
           <h2 class="tilter__description">{{project.tagline}}</h2> 
          </figcaption> 
          <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415"> 
           <path d="M20.5,20.5h260v375h-260V20.5z" /> 
          </svg> 
         </figure> 
        </div> 
        </router-link> 

      </div> 
      </swiper-slide> 
       <div class="swiper-pagination" slot="pagination"></div> 
    </swiper> 
</section> 
</template> 

<script> 
export default { 
    data: function() { 
    return { 
     swiperOption: { 
     autoplay:false, 
     setWrapperSize :true, 
     observeParents:true, 
     keyboardControl : true, 
     centeredSlides :true, 
     freeMode:false, 
     freeModeSticky:true, 
     pagination: '.swiper-pagination', 
     paginationType: 'progress', 
     watchSlidesProgress : true, 
     watchSlidesVisibility : true, 
     speed:650, 
     grabCursor:true, 
     parallax:true 
     }, 


    } 
    }, 

    props :['computedProject'], 

    created : function() { 
     console.log(this.projects) 
    }, 

任意の助けが理解されるであろう。

Answer 1

あなたは次のようにgetEntriesのコールバックでVUEデータ変数を割り当てることができます。

created : function() { 
    var self = this 
    client.getEntries().then((response) => { 
     console.log(response) 
     self.projects = response 
    }) 
    console.log(this.projects) 
    },