在 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 函数中使用了 this/self，因为箭头语法让它工作，这很奇怪，因为这看起来是正确的。

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

        this.work = data;

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

      })

Answer 1

在请求完成之前隐藏渲染的经典方法是将isLoading 属性添加到您的data。请注意，我使用的是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？