[Vuejs]-Vue.js – Composition API – Toggle Button

by

0👍

✅

To have an asynchronous setup method you need to use suspense.

@vue-composition / How can I use asynchronous methods in setup()

Example :

Vue.productionTip = false;

const Todo = {
  async setup(props) {
    const todo = await fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(r => r.json());
    return {
      todo
    }
  },
  template: `
    <div>
      Todo : {{ todo.title }}
    </div>
  `
};

const vm = Vue.createApp({
  components: {
    Todo
  }
}).mount('#app')
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <Suspense>
    <template #default>
      <Todo />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</div>

Also isDisabled is not reactive. You need to use ref to make this varible reactive.

basic example for reactivity with ref:

Vue.productionTip = false;

const vm = Vue.createApp({
  setup(props) {
    const count = Vue.ref(0);
    const inc = () => {
      count.value += 1;
    }
    return {
      count,
      inc
    }
  }
}).mount('#app')
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  Count : {{ count }}
  <button @click="inc">+1</button>
</div>

-2👍

Since initializeButton is an asynchronous operation you should use the await syntax (https://javascript.info/async-await)

async setup() {
  function async initializeButton() {
    return fetch('<some-url>').then(res => { isDisabled = !res.ok; } );
  }
  await initializeButton();
}

Leave a comment