Блог

Я учусь vue.js впервые за сегодняшний вечер, и я не могу понять, почему, когда я устанавливаю массив «список» в функции данных, я не могу изменить его в приведенном ниже методе. У меня есть следующий код, и мой шаблон по-прежнему выдает мою исходную переменную {name: ‘daniel’}, {name: ‘lorie’} .

Мой http-вызов определенно выполняется, поскольку я вижу массив из примерно 100 пользователей на вкладке сеть, но «это.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
  });