Category: JavaScript

Sometimes, we want to pass props using slots from parent to child with Vue.js.

In this article, we’ll look at how to pass props using slots from parent to child with Vue.js.

How to pass props using slots from parent to child with Vue.js?

To pass props using slots from parent to child with Vue.js, we need to create scoped slots.

For instance, in the parent component, we write

<template>
  <div>
    <h3>Parent:</h3>
    <slot :signal="parentVal"></slot>
  </div>
</template>

to add the signal prop and set it to parentVal.

Then in the child component, we write

<template>
  <div>
    <h3>Child {{ signal }}</h3>
  </div>
</template>

<script>
//...
export default {
  //...
  props: ["signal"],
  //...
};
</script>

to make it accept the signal prop.

Then in the component that wraps the parent around the child components, we write

<template>
  <div>
    <my-parent>
      <template slot-scope="{ signal }">
        <my-child :signal="signal"></my-child>
        <my-child :signal="signal"></my-child>
      </template>
    </my-parent>
  </div>
</template>

to wrap my-parent the my-child component instances.

We get the signal slot prop value with slot-scope="{ signal }".

And then we set signal as the value of the signal prop of the my-child instances.

Conclusion

To pass props using slots from parent to child with Vue.js, we need to create scoped slots.

Sometimes, we want to put class="active" to first element in a Vue.js for loop.

In this article, we’ll look at how to put class="active" to first element in a Vue.js for loop.

How to put class="active" to first element in a Vue.js for loop?

To put class="active" to first element in a Vue.js for loop, we can pass a dynamic value to the class prop.

For instance, we write

<template>
  <div>
    <text-component
      v-for="(item, index) in items"
      :class="{ active: index === 0 }"
      :text="item.text"
    >
    </text-component>
  </div>
</template>

<script>
//...
export default {
  //...
  components: {
    TextComponent,
  },
  data() {
    return {
      items: [{ text: "Foo" }, { text: "Bar" }, { text: "Baz" }],
    };
  },
  //...
};
</script>

to set :class to { active: index === 0 } to only set the class attribute to active if index is 0.

We get the index of the item being looped through from the 2nd parameter returned by v-for.

Conclusion

To put class="active" to first element in a Vue.js for loop, we can pass a dynamic value to the class prop.

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.