Category: Vue Answers

Sometimes, we want to access nested child components using refs with Vue.js.

In this article, we’ll look at how to access nested child components using refs with Vue.js.

How to access nested child components using refs with Vue.js?

To access nested child components using refs with Vue.js, we can use the $refs property of the parent component.

For instance, in the parent component, we write

<template>
  <div id="app">
    <my-component ref="myFirstLevelRefName"></my-component>
  </div>
</template>

Then in the child component, we write

<template>
  <div>
    <input ref="mySecondLevelRefName" value="Hello" />
  </div>
</template>

Then back in the parent component, we can access the input in the child component by writing

<script>
//...
export default {
  //...
  mounted() {
    console.log(
      this.$refs.myFirstLevelRefName.$refs.mySecondLevelRefName.value
    );
  },
  //...
};
</script>

We use this.$refs.myFirstLevelRefName.$refs.mySecondLevelRefName to get the input element in the child component from the parent component.

And then we get the input’s value with the value property.

Conclusion

To access nested child components using refs with Vue.js, we can use the $refs property of the parent component.

Sometimes, we want to check if a component exists with Vue.js.

In this article, we’ll look at how to check if a component exists with Vue.js.

How to check if a component exists with Vue.js?

To check if a component exists with Vue.js, we can check if the component name exists as a property key in the $options.components property.

For instance, we write

this.$options.components[componentName];

to check if the component with name set to componentName‘s value exists in the current component instance.

Likewise, we can do the same check for global components with

Vue.$options.components[componentName]

Conclusion

To check if a component exists with Vue.js, we can check if the component name exists as a property key in the $options.components property.

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.