Question

我今晚第一次学习vue.js，我无法理解为什么当我设置一个＆＃34;列表＆＃34;在数据函数中的数组，我无法在下面的方法中更改它。我有以下代码，我的模板仍然会发出我原来的{name：＆＃39; daniel＆＃39;}，{name：＆＃39; lorie＆＃39;}变量。

我的http电话肯定正在制作中，因为我可以在网络标签中看到100个用户的数组，但是＆＃34; this.list = data＆＃34;没有重置我的数据变量

<template>
  <pre>{{list}}</pre>
</template>

<script>
export default {
  data () {
    return {
      list: [{name: 'daniel'}, {name: 'lorie'}]
    }
  },
  created () {
    this.fetchContactList()
  },
  methods: {
    fetchContactList () {
      this.$http.get('https://jsonplaceholder.typicode.com/users', (data) => {
        this.list = data
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  ul.user-list {
    background: #fafafa;
    border:1px solid #ebebeb;
    padding:40px;
    li {
      list-style: none;
      display: block;
      margin-bottom:10px;
      padding-bottom:10px;
      border-bottom:1px solid #ebebeb;
    }
  }
</style>

Answer 1

您正尝试在options参数中传递成功回调。 $http服务使用具有以下格式的promise：

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);

将您的获取请求更改为：

this.$http.get('https://jsonplaceholder.typicode.com/users').then( (response) => {
    this.list = response.body; // The data you want is in the body
  });

Vue.js：如何在.vue模板文件中的vue方法中设置数据变量

1 个答案: