First steps with Alpine. In my example the reactivity does not work #2899

josejachuf · 2022-05-03T15:58:12Z

josejachuf
May 3, 2022

I'm trying to learn Alpine.

Given the following example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
  <title>Alpine JS</title>
  <script src="//unpkg.com/alpinejs" defer></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

  <body>
    <h1>Alpine JS</h1>
    <div x-data="dataTodos()">
      <button @click="fetchTodos()">Get Todos</button>
      <p>Count: <span x-text="count"></span></p>
      <ul>
        <template x-for="todo in todos">
          <li x-text="todo.title"></li>
        </template>
      </ul>
    </div>

    <script>
      function dataTodos() {
        return {
          // isLoading: false,
          todos: [],
          count: 0,
          fetchTodos() {
            this.isLoading = true;
            axios.get('https://jsonplaceholder.typicode.com/todos/')
              .then(function (response) {
                this.todos = response.data;
                this.count = this.todos.length;
                console.log('Count', this.count);
              })
              .catch(function (error) {
                console.log(error);
              })
              .then(function () {
                // always executed
              });
          }
        }
      }
    </script>

  </body>
</html>

Why it is not reactive?. When I press the button I hope to obtain the todos list and the quantity. The call with axios runs fine and I get the todos in the function, but I do not see them reflected in the HTML.

I imagine I'm doing something wrong

Thanks!

Answered by SimoTod

May 3, 2022

You need to use arrow functions. this gets redefined in standard functions so it won't point to your alpine component (It's not an Alpine thing, it's how javascript works).

axios.get('https://jsonplaceholder.typicode.com/todos/')
  .then((response) => {
    this.todos = response.data;
    this.count = this.todos.length;
    console.log('Count', this.count);
 }).catch((error) => {
    console.log(error);
}).then(function () {
    // always executed
});

View full answer

SimoTod · 2022-05-03T16:10:54Z

SimoTod
May 3, 2022
Collaborator

You need to use arrow functions. this gets redefined in standard functions so it won't point to your alpine component (It's not an Alpine thing, it's how javascript works).

axios.get('https://jsonplaceholder.typicode.com/todos/')
  .then((response) => {
    this.todos = response.data;
    this.count = this.todos.length;
    console.log('Count', this.count);
 }).catch((error) => {
    console.log(error);
}).then(function () {
    // always executed
});

1 reply

josejachuf May 3, 2022
Author

Hi @SimoTod , Thank you very much.

It worked perfect

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

First steps with Alpine. In my example the reactivity does not work #2899

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

First steps with Alpine. In my example the reactivity does not work #2899

Uh oh!

josejachuf May 3, 2022

Replies: 1 comment · 1 reply

Uh oh!

SimoTod May 3, 2022 Collaborator

Uh oh!

josejachuf May 3, 2022 Author

josejachuf
May 3, 2022

Replies: 1 comment 1 reply

SimoTod
May 3, 2022
Collaborator

josejachuf May 3, 2022
Author