Category: Vue Answers

Sometimes, we want to access getters within Vuex mutations with Vue.js.

In this article, we’ll look at how to access getters within Vuex mutations with Vue.js.

How to access getters within Vuex mutations with Vue.js?

To access getters within Vuex mutations with Vue.js, we just use the state in the getter and call the getter with the state.

For instance, we write

//...
const store = new Vuex.Store({
  //...
  getters: {
    foo: (state) => {
      return getterFunc(state);
    },
  },
  mutations: {
    fooMutation: (state, data) => {
      getterFunc(state);
    },
  },
  //...
});

to call getterFunc in both the foo getter and the fooMutation mutation.

getterFunc is used to return the same data from the state in both methods.

Conclusion

To access getters within Vuex mutations with Vue.js, we just use the state in the getter and call the getter with the state.

Sometimes, we want to override Vuetify styles with Vue.js.

In this article, we’ll look at how to override Vuetify styles with Vue.js.

How to override Vuetify styles with Vue.js?

To override Vuetify styles with Vue.js, we can add scoped styles with the deep selector.

For instance, we write

<style scoped>
.parent-element >>> .vuetify-class {
  // ...
}
</style>

<style lang="scss" scoped>
  .vuetify-class {
    ::v-deep other-class {
      // ...
    }
  }
</style>

to add the scoped attribute to styles to keep the styles applied to the current component only.

And then we use >>> or ::v-deep to select the Vuetify class with the styles we want to override.

Conclusion

To override Vuetify styles with Vue.js, we can add scoped styles with the deep selector.

Sometimes, we want to add or remove DOM elements dynamically with Vue.js.

In this article, we’ll look at how to add or remove DOM elements dynamically with Vue.js.

How to add or remove DOM elements dynamically with Vue.js?

To add or remove DOM elements dynamically with Vue.js, we can manipulate values of reactive properties and then use directives to render the data based on the reactive property values.

For instance, we write

<template>
  <div>
    <ul>
      <li v-for="(input, index) in inputs" :key="input.id">
        <input type="text" v-model="input.one" /> - {{ input.one }}
        <input type="text" v-model="input.two" /> - {{ input.two }}
        <button @click="deleteRow(index)">Delete</button>
      </li>
    </ul>

    <button @click="addRow">Add row</button>
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      inputs: [],
    };
  },

  methods: {
    addRow() {
      this.inputs.push({
        id: uuidv4(),
        one: "",
        two: "",
      });
    },
    deleteRow(index) {
      this.inputs.splice(index, 1);
    },
  },
  //...
};
</script>

to render the inputs array items with v-for.

We render 2 inputs based on the items,

And then we render the Delete button.

And when we click Add row, the addRow method is done which calls this.inputs.push to append a new entry.

After that, v-for will re-render the inputs array to include the new entry.

Likewise, when deleteRow is called, the item at the given index will be removed and v-for will re-render the new list.

Conclusion

To add or remove DOM elements dynamically with Vue.js, we can manipulate values of reactive properties and then use directives to render the data based on the reactive property values.

Sometimes, we want to fix Vuetify v-select change event returns previously selected value instead of current with Vue.js.

In this article, we’ll look at how to fix Vuetify v-select change event returns previously selected value instead of current with Vue.js.

How to fix Vuetify v-select change event returns previously selected value instead of current with Vue.js?

To fix Vuetify v-select change event returns previously selected value instead of current with Vue.js, we set the @change directive to the reference of the change event handler.

For instance, we write

<template>
  <div>
    <v-select
      :items="items"
      v-model="select"
      label="Select"
      single-line
      item-text="report"
      item-value="src"
      return-object
      persistent-hint
      @change="changeRoute"
    ></v-select>
  </div>
</template>

<script>
//...
export default {
  //...
  methods: {
    changeRoute(a) {
      console.log(a);
    },
  },
  //...
};
</script>

to add a v-select drop down.

We set @change to the changeRoute method.

To get the latest value of the drop down, we get it from the a parameter in changeRoute.

Conclusion

To fix Vuetify v-select change event returns previously selected value instead of current with Vue.js, we set the @change directive to the reference of the change event handler.

Sometimes, we want to check if you are on the last property of an object in a v-for loop with Vue.js.

In this article, we’ll look at how to check if you are on the last property of an object in a v-for loop with Vue.js.

How to check if you are on the last property of an object in a v-for loop with Vue.js?

To check if you are on the last property of an object in a v-for loop with Vue.js, we can use the index and the Object.keys method.

For instance we write

<template>
  <div>
    <span v-for="(val, key, index) of person" :key="key">
      key: {{ key }}, val: {{ val }}, index: {{ index }}
      <span v-if="index !== Object.keys(person).length - 1">, </span>
    </span>
  </div>
</template>

to get the index of the property being looped through in the person object.

And we check if we aren’t on the last property of person with

index !== Object.keys(person).length - 1

We use to Object.keys return an array of property keys in the person object and we get the length of that to get the number of properties in the object.

Conclusion

To check if you are on the last property of an object in a v-for loop with Vue.js, we can use the index and the Object.keys method.