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

Posted 2023-02-22

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

【英文标题】：Vue.js: how do you set a data variable in a vue method inside a .vue template file

【发布时间】：2017-02-17 02:05:31

【问题描述】：

我今晚第一次学习 vue.js，我无法理解为什么当我在数据函数中设置“列表”数组时，我无法在下面的方法中更改它。我有以下代码，我的模板仍然吐出我原来的 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>

【参考方案1】：

您正试图在选项参数中传递您的成功回调。 $http 服务使用以下格式的承诺：

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