Блог

Я работаю над проектом с использованием vue и axios, согласно консоли, похоже, что у axios есть ответ, но не знаю, почему результат не может отображаться на странице html и какие-либо советы по отладке vue? Спасибо! вот фрагмент кода

 <ul id="tasklist" class="list-group">
  <li v-for="task in todo_task_list" :key="task.id">
    {{ task.content }}
  </li>
</ul>  

 <script>
  var vue = new Vue({
    el: '#tasklist',
    data () {
      return {
        todo_task_list: null
      }
    },
    mounted () {
      axios
        .get('/todo/api/todotask/')
        .then(function(response){
          this.todo_task_list = response.data
          console.log(todo_task_list)
        })
        .catch(function (error) { 
          console.log(error);
        });
    }
  })
</script>  

вот результат, отображаемый в консоли

Ваша проблема в том, что function(response) это устанавливает контекст this для этой функции. Поэтому при последующем использовании this.todo_task_list вы все еще находитесь в контексте этой функции, а не экземпляра vue. Таким образом, todo_task_list вы объявили в data(){...} никогда не изменяется.

Вы можете использовать функции со стрелками, чтобы сохранить родительский контекст this .

Итак, если вы хотите this.todo_task_list указать на экземпляр vue, вы можете сделать:

 await axios
  .get('/todo/api/todotask/')
  .then( (response) => {                // <-- arrow-function!
    this.todo_task_list = response.data // Now "this" is the vue-instance.
    console.log(todo_task_list)
  })
  .catch(function (error) { 
    // Here you don't use "this." so it doesn't matter either way.
    console.log(error);
  });
}