Category: Vue Answers

Sometimes, we want to fix Vue.js dynamic images not working.

In this article, we’ll look at how to fix Vue.js dynamic images not working.

How to fix Vue.js dynamic images not working?

To fix Vue.js dynamic images not working, we can create a method that returns the path to the image.

For instance, we write

<template>
  <div class="col-lg-2" v-for="pic in pics">
    <img :src="getImgUrl(pic)" v-bind:alt="pic" />
  </div>
</template>

<script>
//...

export default {
  //...
  methods: {
    //...
    getImgUrl(pic) {
      return require("../assets/" + pic);
    },
  },
  //...
};
</script>

to add the getImgUrl method that calls require with the relative path to return the path of the image/

And then we set the src prop to the path string returned by the getImgUrl function.

Conclusion

To fix Vue.js dynamic images not working, we can create a method that returns the path to the image.

Sometimes, we want to get selected option on @change with Vue.js.

In this article, we’ll look at how to get selected option on @change with Vue.js.

How to get selected option on @change with Vue.js?

To get selected option on @change with Vue.js, we can set @change to a function calls with $event.

For instance, we write

<template>
  <select @change="onChangeMethod($event)">
    <option value="test">Test</option>
    <option value="test2">Test2</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      //...
    };
  },
  methods: {
    onChangeMethod(event) {
      console.log(event.target.value);
    },
  },
  created() {
    //...
  },
};
</script>

to add a select drop down.

And we set @change to onChangeMethod($event), which means onChangeMethod is called with the change event object.

Then when selection changes, we get the selected options’ value attribute value with event.target.value.

Conclusion

To get selected option on @change with Vue.js, we can set @change to a function calls with $event.

Sometimes, we want to pass props dynamically to dynamic component in Vue.js.

In this article, we’ll look at how to pass props dynamically to dynamic component in Vue.js.

How to pass props dynamically to dynamic component in Vue.js?

To pass props dynamically to dynamic component in Vue.js, we can use the v-bind directive.

For instance, we write

<component :is="currentComponent" v-bind="currentProperties"></component>

in the template to pass all the properties in the currentProperties as props to the dynamic component component.

We set the component to load by setting the isprop to thecurrentComponent` component name string.

Then in the component code, we write

//...
export default {
  //...
  data() {
    return {
      currentComponent: "myComponent",
    };
  },
  computed: {
    currentProperties() {
      if (this.currentComponent === "myComponent") {
        return { foo: "bar" };
      }
    },
  },
  //...
};
//...

to add the data metjod to return the value of currentComponent.

And we add the currentProperties computed property to return the prop object for the myComponent component.

Conclusion

To pass props dynamically to dynamic component in Vue.js, we can use the v-bind directive.

Sometimes, we want to set default values for Vue component props and how to check if a user did not set the prop.

In this article, we’ll look at how to set default values for Vue component props and how to check if a user did not set the prop.

How to set default values for Vue component props and how to check if a user did not set the prop?

To set default values for Vue component props and how to check if a user did not set the prop, we can set the default property of the prop.

For instance, we write

export default {
  //...
  props: {
    year: {
      default: 2022,
      type: Number,
    },
  },
  //...
};

to add the year prop to the component.

We set its default value to 2022.

And we set its type to Number.

If year is 2022, then we know the prop isn’t set or it’s set to 2022.

Conclusion

To set default values for Vue component props and how to check if a user did not set the prop, we can set the default property of the prop.

Sometimes, we want to download files from responses made with GET requests.

In this article, we’ll look at how to download files from responses made with GET requests.

Force Download with GET Request using Axios

We can make the response always download by passing our response data into the Blob constructor.

For instance, we can write:

axios
  .get(`download-pdf`, {
    responseType: 'arraybuffer'
  })
  .then(response => {
    const blob = new Blob(
      [response.data],
      { type: 'application/pdf' }
    ),
    const url = window.URL.createObjectURL(blob);
    window.open(url) ;
  })

We make a GET request to the download-pdf endpoint to download our PDF.

We make sure that we specify that the responseType is 'arraybuffer' to indicate that it’s a binary file.

Then in the then callback, we get the response parameter, which has the data we want in the data property.

We pass that into the Blob constructor in an array.

And we specify the MIME type of the response data.

Then we create the URL that lets us download the file with createObjectURL .

Finally, we call window.open with the url to download the file.

We can also specify the file name of the downloaded file by making a small change in the then callback.

To do that, we write:

axios
  .get(`download-pdf`, {
    responseType: 'arraybuffer'
  })
  .then(response => {
    const blob = new Blob(
      [response.data],
      { type: 'application/pdf' }
    ),
    const link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = "file.pdf";
    link.click();
  })

Instead of creating an object URL directly, we create an invisible link first and set the file name as the download property of it.

Then we call click to download it.

Conclusion

We can make the response always download by passing our response data into the Blob constructor.