Category: Vue Answers

Sometimes, we want to run code in mounted and again for restart functionality with Vue.js.

In this article, we’ll look at how to run code in mounted and again for restart functionality with Vue.js.

How to run code in mounted and again for restart functionality with Vue.js?

To run code in mounted and again for restart functionality with Vue.js, we move the code in mounted into its own method.

For instance, we write

new Vue({
  methods: {
    init() {
      //...
    },
  },
  mounted() {
    this.init();
  },
});

to define the init method and call it in mounted.

Then we add

<button v-if="playerWon" @click="init">Play Again</button>

into our HTML code to call init when we click on the button.

Conclusion

To run code in mounted and again for restart functionality with Vue.js, we move the code in mounted into its own method.

Sometimes, we want to open a Vuetify dialog from a component template in Vue.js.

In this article, we’ll look at how to open a Vuetify dialog from a component template in Vue.js.

How to open a Vuetify dialog from a component template in Vue.js?

To open a Vuetify dialog from a component template in Vue.js, we can use v-model.

For instance, we write

<template>
  <v-dialog v-model="show" max-width="500px">
    <v-card>
      <v-card-actions>
        <v-btn color="primary" flat @click.stop="show = false">Close</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props: {
    value: Boolean,
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
  },
};
</script>

to add the v-dialog into the ScheduleForm.vue file.

We emit the show value to the parent when we open or close the dialog.

And we get the show value from the parent via the value prop.

If show is true then the dialog is shown.

Then we write

<template>
  <v-btn color="accent" large @click.stop="showScheduleForm = true" />
  <ScheduleForm v-model="showScheduleForm" />
</template>

<script>
import ScheduleForm from "~/components/ScheduleForm";

export default {
  data() {
    return {
      showScheduleForm: false,
    };
  },
  components: {
    ScheduleForm,
  },
};
</script>

to import and register it in the parent component.

Then we set v-model to showScheduleForm to show the dialog if it’s set to true.

Conclusion

To open a Vuetify dialog from a component template in Vue.js, we can use v-model.

Sometimes, we want to use setInterval in a Vue component.

In this article, we’ll look at how to use setInterval in a Vue component.

How to use setInterval in a Vue component?

To use setInterval in a Vue component, we call it with a callback.

For instance, we write

<script>
//...

export default {
  //...
  methods: {
    todo() {
      this.intervalid = setInterval(() => {
        this.changes = (Math.random() * 100).toFixed(2) + "%";
      }, 3000);
    },
  },
  //...
};
</script>

to call setInterval with a function that sets the value of this.changes every 3 seconds.

We call it with an arrow function so this is still the Vue component instance inside the setInterval callback.

Conclusion

To use setInterval in a Vue component, we call it with a callback.

Sometimes, we want to run code after a Vue component renders.

In this article, we’ll look at how to run code after a Vue component renders.

How to run code after a Vue component renders?

To run code after a Vue component renders, we put the code in the updated hook.

For instance, we write

<script>
//...
export default {
  //...
  updated() {
    //...
  },
};
</script>

to add the update hook in our component so that the code inside is run after the component is rendered.

Conclusion

To run code after a Vue component renders, we put the code in the updated hook.

Sometimes, we want to the set selected in Vue.js 2.

In this article, we’ll look at how to the set selected in Vue.js 2.

How to set the selected option in Vue.js 2?

To set selected option selected in Vue.js 2, we set the v-model variable to the selected option’s value attribute value.

For instance, we write

<template>
  <select v-model="selectedDay">
    <option v-for="day in days">{{ day }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedDay: 1,
      days: Array.from({ length: 31 }, (v, i) => i).slice(1),
    };
  },
  mounted() {
    const selectedDay = new Date();
    this.selectedDay = selectedDay.getDate();
  },
};
</script>

to add the select drop down in the template.

We render the days values as options with v-for.

Then we define the days array in the data method.

Next, we set this.selectedDay to today’s date that we get from calling getDate on the current date which is selectedDay.

Conclusion

To set selected option selected in Vue.js 2, we set the v-model variable to the selected option’s value attribute value.