vue请求服务器数据后绑定不上的解决方法

当我们使用Vue来请求服务器的数据时，有时候会出现绑定不上数据的情况。造成这种情况的主要原因是因为我们没有正确处理异步请求。下面是几个解决方法：

1. 使用Vue-resource库

Vue-resource是Vue官方提供的一个用于处理Vue与服务器间数据交互的库，是Vue-resource自动处理异步请求的方式。下面是一个示例：

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  import Vue from 'vue'
  import VueResource from 'vue-resourse'
  Vue.use(VueResource)

  export default {
    data () {
      return {
        items: []
      }
    },
    created () {
      // 使用Vue-resource发送http请求
      this.$http.get('http://example.com/items').then(response => {
        this.items = response.body
      }, error => {
        console.log(error)
      })
    }
  }
</script>

2. 使用Vue的生命周期方法

在Vue中，我们可以使用钩子函数来处理异步请求，将请求放在created生命周期方法中。

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        items: []
      }
    },
    created () {
      this.getItems()
    },
    methods: {
      getItems () {
        fetch('http://example.com/items')
          .then(response => response.json())
          .then(data => {
            this.items = data
          })
      }
    }
  }
</script>

在以上示例中，我们使用钩子函数created来调用getItems方法，获取数据后再将数据赋值到data中的items属性中。

这两个方法都是解决异步请求后，进行数据绑定的有效方法。当然，具体使用哪种方法还要根据实际情况和个人喜好来选择。