Category: Vue

Sometimes, we want to fix the "Property does not exist on type ‘Vue’" error.

In this article, we’ll look at how to fix the "Property does not exist on type ‘Vue’" error.

How to fix the "Property does not exist on type ‘Vue’" error?

To fix the "Property does not exist on type ‘Vue’" error, we can add the missing property into TypeScript type definition file.

For instance, in vue-file-import.d.ts, we add

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

to add the type definition for .vue files by exporting Vue as a default export within the declare module statement.

Conclusion

To fix the "Property does not exist on type ‘Vue’" error, we can add the missing property into TypeScript type definition file.

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.