Category: JavaScript

Sometimes, we want to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js.

In this article, we’ll look at how to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js.

How to fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js?

To fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js, we should make sure the reactive property we’re referencing in the template is defined in the component code.

For instance, we write

<template>
  <span>{{ name }}</span>
</template>

<script>
export default {
  name: "MyComponent",
  data() {
    return {
      name: "",
    };
  },
};
</script>

to define the name reactive property by returning the name property in the object returned in the data method,

And then we can reference the name value in the template without errors.

Conclusion

To fix the ‘[Vue warn]: Property or method is not defined on the instance but referenced during render’ error with Vue.js, we should make sure the reactive property we’re referencing in the template is defined in the component code.

Sometimes, we want to pass a value from Vue.js data to href.

In this article, we’ll look at how to pass a value from Vue.js data to href.

How to pass a value from Vue.js data to href?

To pass a value from Vue.js data to href, we can use template string literals.

For instance, we write

<template>
  <div><a :href="`/job/${r.id}`"</div>
</template>

to set the href prop to /job/${r.id} where r is a reactive property.

Conclusion

To pass a value from Vue.js data to href, we can use template string literals.

Sometimes, we want to use forEach to loop through two arrays at the same time in JavaScript.

In this article, we’ll look at how to use forEach to loop through two arrays at the same time in JavaScript.

How to use forEach to loop through two arrays at the same time in JavaScript?

To use forEach to loop through two arrays at the same time in JavaScript, we can use the index parameter of the forEach callback to get the element with the same index from the 2nd array.

For instance, we write

const n = [1, 2, 3, 5, 7, 8, 9, 11, 12, 13];
const m = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

n.forEach((num1, index) => {
  const num2 = m[index];
  console.log(num1, num2);
});

to call n.forEach with a callback that gets the element from m with the same index and assign it to num2.

And then we log the value of num1 and num2.

Conclusion

To use forEach to loop through two arrays at the same time in JavaScript, we can use the index parameter of the forEach callback to get the element with the same index from the 2nd array.

Sometimes, we want to import and use image in a Vue.js single file component.

In this article, we’ll look at how to import and use image in a Vue.js single file component.

How to import and use image in a Vue.js single file component?

To import and use image in a Vue.js single file component, we can set the src prop of the image to the image path returned by the require function.

For instance, we write

<template>
  <div id="app">
    <img :src="require('./assets/logo.png')" />
  </div>
</template>

<script>
export default {};
</script>

<style lang="css"></style>

to set the src prop of the image to the path returned by require.

We call require with the relative path of the image to return the resolved path of the image.

Conclusion

To import and use image in a Vue.js single file component, we can set the src prop of the image to the image path returned by the require function.

Sometimes, we want to reference static assets with Vue.js.

In this article, we’ll look at how to reference static assets with Vue.js.

How to reference static assets with Vue.js?

To reference static assets with Vue.js, we can set the src attribute of the img element to a path that starts with @/.

For instance, we write

<img src="@/assets/images/home.png"/>

to set the src attribute of the img element to an image with the path starting with @/.

@/ is a shorthand for the src directory in the Vue project.

Conclusion

To reference static assets with Vue.js, we can set the src attribute of the img element to a path that starts with @/.