Category: Vue Answers

Sometimes, we want to fire an event when v-model changes in Vue.js.

In this article, we’ll look at how to fire an event when v-model changes in Vue.js.

How to fire an event when v-model changes in Vue.js?

To fire an event when v-model changes in Vue.js, we can use the @input directive.

For instance, we write

<template>
  <div>
    <input @input="handleInput" />
  </div>
</template>

to run handleInput whenever the input value changes.

Conclusion

To fire an event when v-model changes in Vue.js, we can use the @input directive.

Sometimes, we want to change another module state from one module in Vuex.

In this article, we’ll look at how to change another module state from one module in Vuex.

How to change another module state from one module in Vuex?

To change another module state from one module in Vuex, we can call commit with the mutation name with the root option set to true.

For instance, we write

commit("TOGGLE_LOADING", null, { root: true });

to call commit to commit the TOGGLE_LOADING mutation with root set to true.

This lets is commit TOGGLE_LOADING no matter which module it’s in.

If the modules are namespaced, we can add the namespace before the mutation name.

For instance, we write

commit("loading/TOGGLE_LOADING", null, { root: true });

to commit the TOGGLE_LOADING mutation that’s in the loading namespace.

Conclusion

To change another module state from one module in Vuex, we can call commit with the mutation name with the root option set to true.

Sometimes, we want to set URL query parameters in Vue.js with Vue Router.

In this article, we’ll look at how to set URL query parameters in Vue.js with Vue Router.

How to set URL query parameters in Vue.js with Vue Router?

To set URL query parameters in Vue.js with Vue Router, we can call $router.push with an object with the query property.

For instance, we write

this.$router.push({ path: 'register', query: { plan: 'private' }})

to call this.$router.push with an object that has the query property set to { plan: 'private' }.

This way, we have the plan query string parameter set to private in the URL we’re navigating to.

Conclusion

To set URL query parameters in Vue.js with Vue Router, we can call $router.push with an object with the query property.

Sometimes, we want to clear state in a Vuex store.

In this article, we’ll look at how to clear state in a Vuex store.

How to clear state in a Vuex store?

To clear state in a Vuex store, we can call Object.assign.

For instance, we write

const getDefaultState = () => {
  return {
    items: [],
    status: "empty",
  };
};

const state = getDefaultState();

const actions = {
  resetCartState({ commit }) {
    commit("resetState");
  },
  addItem({ state, commit }, item) {
    /* ... */
  },
};

const mutations = {
  resetState(state) {
    Object.assign(state, getDefaultState());
  },
};

export default {
  state,
  getters: {},
  actions,
  mutations,
};

to add the resetState mutation that calls Object.assign with state and the object returned by getDefaultState to merge the property values from the object returned by getDefaultState into state.

This will reset the state property values to the ones listed in the object in getDefaultState.

Conclusion

To clear state in a Vuex store, we can call Object.assign.

Sometimes, we want to get URL query with Vue.js.

In this article, we’ll look at how to get URL query with Vue.js.

How to get URL query with Vue.js?

To get URL query with Vue.js, we can use the this.$route.query property if we have Vue Router.

For instance, we write

this.$route.query.page

to get the page query parameter’s value in our Vue component.

Conclusion

To get URL query with Vue.js, we can use the this.$route.query property if we have Vue Router.