Category: Vue

Sometimes, we want to fix dynamic background image style not working in Vue.js.

In this article, we’ll look at how to fix dynamic background image style not working in Vue.js.

How to fix dynamic background image style not working in Vue.js?

To fix dynamic background image style not working in Vue.js, we can interpolate the background image URL into a string.

For instance, we write

<template>
  <div :style="{ 'background-image': `url(${image})` }"></div>
</template>

to set the style prop to an object with the background-image property set to url(${image}).

This sets the background-image CSS property to the URL of the background image if image is has the background image URL.

Conclusion

To fix dynamic background image style not working in Vue.js, we can interpolate the background image URL into a string.

Sometimes, we want to disable ESLint in Vue CLI.

In this article, we’ll look at how to disable ESLint in Vue CLI.

How to disable ESLint in Vue CLI?

To disable ESLint in Vue CLI, we just remove the @vue/cli-plugin-eslint package from the Vue CLI project.

We run

npm remove @vue/cli-plugin-eslint

to remove the @vue/cli-plugin-eslint package, which will disable ESLint in the Vue CLI project.

Conclusion

To disable ESLint in Vue CLI, we just remove the @vue/cli-plugin-eslint package from the Vue CLI project.

Sometimes, we want to pass down slots inside wrapper component with Vue.js.

In this article, we’ll look at how to pass down slots inside wrapper component with Vue.js.

How to pass down slots inside wrapper component with Vue.js?

To pass down slots inside wrapper component with Vue.js, we can use the $scopedSlots property.

For instance, we write

<template>
  <wrapper>
    <b-table v-bind="$attrs" v-on="$listeners">
      <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"
        ><slot :name="slot" v-bind="scope"
      /></template>
    </b-table>
  </wrapper>
</template>

to loop through the $scopedSlots property with v-for.

And then we get the slot name from the slot property.

We then set the slot to name and the scope of the slot to v-bind to pass down the name and variables.

Conclusion

To pass down slots inside wrapper component with Vue.js, we can use the $scopedSlots property.

Sometimes, we want to set a component’s non-reactive data in Vue.js 2.

In this article, we’ll look at how to set a component’s non-reactive data in Vue.js 2.

How to set a component’s non-reactive data in Vue.js 2?

To set a component’s non-reactive data in Vue.js 2, we can set them as properties of this in the created hook.

For instance, we write

<template>
  <div id="app">
    <ul>
      <li v-for="item in arr" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  created() {
    this.arr = ["item 1", "item 2"];
  },
};
</script>

to set the non-reactive this.arr property to ["item 1", "item 2"] in the created hook.

And then we render the items in arr with v-for.

this.arr is reactive since the assignment is done in the created hook.

Conclusion

To set a component’s non-reactive data in Vue.js 2, we can set them as properties of this in the created hook.

Sometimes, we want to use scoped styles in Vue.js single file components.

In this article, we’ll look at how to use scoped styles in Vue.js single file components.

How to use scoped styles in Vue.js single file components?

To use scoped styles in Vue.js single file components, we can add the module attribute to the style tag.

For instance, we write

<template>
  <div :class="$style.baz">
    <Bar></Bar>
  </div>
</template>

<style module>
.baz {
  color: green;
}
</style>

to add the style tag with the module attribute so we can use $style to add the styles in the template.

We add the baz class in style and set its color to green.

Then we set the class prop of the div to $style.baz to apply the baz class to the div to make its content color green.

Conclusion

To use scoped styles in Vue.js single file components, we can add the module attribute to the style tag.