Назначение данных при использовании x-init alpine не применяется - PullRequest
Новая
       22

Назначение данных при использовании x-init alpine не применяется

0 голосов
/ 01 августа 2020

С alpine@v2.x.x и ax ios ":" ^ 0.19.2 Я пытаюсь получить данные с помощью x-init, как я читал здесь https://github.com/alpinejs/alpine с кодом: 

<div
    class="todo_list_wrapper"
    x-data="addTodos()"
    x-init="initTodos()"
>
    
    <ul>
        
        <template x-for="nextTodo in todos" :key="nextTodo.id">
            <div class="todo_content_1 row_content">
                <div class="m-2" x-text="nextTodo.title" :class="{ 'todo_completed' : nextTodo.completed } " >
                </div>
            </div>
        </template>
    
    
    </ul>

</div>

<script>
    function initTodos() {
        console.log('initTodos()::')
        axios.get('/api/todos', {
        }).then((response) => {
            console.log("response::")
            console.log(response)
            this.todos= response.data
            console.log('FROM initTodos() this.todos::')
            console.log(this.todos)
        }).catch((error) => {
            console.error(error)
        });

    }

    function addTodos() {
        console.log('addTodos::')
        return {
            todos : [],

            /*
                        todos : [{
                            id:1,
                            title:"Task 1",
                            completed: true
                        },
                            {
                            id:2,
                            title:"Task 2",
                            completed: false
                        }],
            */

        }
    }

в консоли; e Я вижу, что сначала запускается addTodos с объявлением данных и initTodos () с данными, полученными из db: https://imgur.com/a/zSj23Ad, но мой список пуст. Если раскомментировать 2 строки внутри функции addTodos (- я вижу эти строки, но не возвращаются из базы данных.

Что не так? Я ожидал, что присвоение this.todos должно быть реактивным ...

...