Блог

Главная - Вопросы по программированию - (Vue Laravel) Как обновить объект из данных ответа axios и использовать его в другой функции?

(Vue Laravel) Как обновить объект из данных ответа axios и использовать его в другой функции?

#javascript #laravel #vue.js #undefined

#javascript #laravel #vue.js #не определено

Вопрос:

Я застрял в своем приложении ToDo, где я хочу добавить индикатор выполнения для выполненных задач.

Это response.data nodelist примерно так:

 [
  {"id":21,"title":"Third","completed":0,"created_at":"2020-11-17T14:45:08.000000Z","updated_at":"2020-11-17T16:10:29.000000Z"},
  {"id":24,"title":"fourth","completed":0,"created_at":"2020-11-17T20:51:02.000000Z","updated_at":"2020-11-17T20:51:02.000000Z"},
  {"id":18,"title":"First ToDo","completed":1,"created_at":"2020-11-17T13:31:14.000000Z","updated_at":"2020-11-17T16:49:14.000000Z"},
  {"id":19,"title":"Second ToDo","completed":1,"created_at":"2020-11-17T14:11:17.000000Z","updated_at":"2020-11-17T20:23:21.000000Z"}
]`

Я определил задачи в данных в моем TaskComponent.vue :

     data(){

        return{
            hook: '',
            editmode: false,
            // todos: [],
            todos: {
                title: '',
                completed: '',

и получить данные ответа из базы данных с помощью laravel:

     getTask(){
            axios.get('api/task').then(function(res) {
                this.todos = res.data;
            }.bind(this)).catch((error)=>{
                console.log(error);
            })
        },

затем я хочу использовать эти выбранные данные для подсчета моих выполненных и общих задач и получить процент от них

     computed: {     
           checkCompleted(){
            let count = 0;           
            for (let i = 0; i < this.todos.length;   i){
                if(this.todos[i]){
                    count  ;
                }
            }
            return count;

Проблема в том, что todos объект не обновляется и продолжает оставаться пустым. Значение по this.todos -прежнему пустое.
Я не могу понять, почему я могу использовать todos объект с его данными в <template> , а не в другой функции.

 <template>
   <div v-for="todo in todos" :key="todo.id">
       <span v-if="editmode == false || editmode != todo.id">{{todo.title}}</span>
   </div>
</template>

Комментарии:

1. Я бы предложил минимизировать ваш код: просто попробуйте поместить один фрагмент данных в «данные» и отобразить его. Работает ли это?

2. Вы определили ‘todos’ в data как объект, а не массив. Вы не можете использовать this.todos.length , потому что это будет undefined . Вы пытались определить задачи как пустой массив? todos: [] ?

3. Я попытался определить задачи как массив [], и это тоже не сработало, но теперь я сделал еще один шаг вперед: я выяснил, что вы можете использовать только обновленные объекты из axios.get в <template> . Для того, чтобы использовать его в <script> you have to use Vuex and mount it to the main App.vue like in this example: github.com/lizzz0523/limni/tree/master/todo-app