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

Vue.js: how do you set a data variable in a vue method inside a .vue template file

本文关键字：vue 方法 变量 置数据 文件 js      更新时间：2023-09-26

我今晚第一次学习vue.js，我不明白为什么当我在data函数中设置一个"list"数组时，我不能在下面的方法中更改它。我有下面的代码，我的模板仍然吐出我原来的{name: 'daniel'}， {name: 'lorie'}变量。

我的http调用肯定正在进行，因为我可以在网络选项卡中看到一个像100个用户的数组，但是"this。List = data"没有重置我的数据变量

<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>

您正在尝试在options参数中传递成功回调。$http服务使用如下格式的承诺:

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

把get请求改成:

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