Categories
Vue Answers

How ow to Download a File in the Browser with Vue.js?

Sometimes, we want to download a file in the browser with Vue.js.

In this article, we’ll look at how to download a file in the browser with Vue.js.

Download a File in the Browser with Vue.js

To download a file in the browser with Vue.js, we can make a GET request to get the file response data.

Then we can create a link from it and click on it programmatically to download the file.

For instance, we can write:

<template>
  <div id="app">
    <a
      href="#"
      @click.prevent="
        downloadItem({
          url:
            'https://test.cors.workers.dev/?https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
          label: 'example.pdf',
        })
      "
    >
      download
    </a>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "App",
  methods: {
    async downloadItem({ url, label }) {
      const response = await axios.get(url, { responseType: "blob" });
      const blob = new Blob([response.data], { type: "application/pdf" });
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = label;
      link.click();
      URL.revokeObjectURL(link.href);
    },
  },
};
</script>

We have the downloadItem method that takes an object with the file url to download, and the label property which has the file name.

In the method, we call axios.get to get the data from the url .

We set responseType to 'blob' to let us download the data.

Next, we create a Blob instance with the response.data which has the file contents.

type is set to the MIME type of the file.

Next, we use document.createElement to create the a element which we click to download the file.

We set its href to the URL created by URL.createObjectURL with the blob .

And then we set the download property to the label file name.

Then we call click to click on the a element to do the download.

And finally, we call URL.revokeObjectURL to clear the URL resources.

Conclusion

To download a file in the browser with Vue.js, we can make a GET request to get the file response data.

Categories
Vue Answers

How to Listen for Right Clicks with Vue.js?

Sometimes, we want to listen for right clicks and do something when the user right-clicks on an element with Vue.js.

In this article, we’ll look at how to listen for right clicks and do something when the user right-clicks on an element with Vue.js.

Listen for Right Clicks with Vue.js

To listen for right clicks and do something when the user right-clicks on an element with Vue.js, we can use the @contextmenu directive to listen for contextmenu events, which are emitted on right-click.

For instance, we can write:

<template>  
  <div id="app">  
    <button @contextmenu.prevent="onRightClick">right click me</button>  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  methods: {  
    onRightClick() {  
      console.log("right clicked");  
    },  
  },  
};  
</script>

We add the prevent modifier to prevent the default right-click menu from showing, and instead the onRightClick method will be run when we right click on the button.

Now when we right-click on the button, we see 'right clicked' logged.

Conclusion

To listen for right clicks and do something when the user right-clicks on an element with Vue.js, we can use the @contextmenu directive to listen for contextmenu events, which are emitted on right-click.

Categories
Vue Answers

How to Get an Element’s Height with Vue.js?

Sometimes, we want to get an element’s height with Vue.js.

In this article, we’ll look at how to get an element’s height with Vue.js.

Get an Element’s Height with Vue.js

To get an element’s height with Vue.js, we can assign a ref to the element we want to get the height for.

Then we can get the height with the clientHeight property of the element that’s been assigned the ref.

For instance, we can write:

<template>  
  <div id="app">  
    <div ref="infoBox">hello world</div>  
  </div>  
</template>  
<script>  
export default {  
  name: "App",  
  mounted() {  
    console.log(this.$refs.infoBox.clientHeight);  
  },  
};  
</script>

We assigned the ref with the ref prop set to a name.

Then we can use the this.$refs property to get the element with thos.$refs.infoBox which returns the div element.

And then we can use clientHeight to get the div’s height.

Conclusion

To get an element’s height with Vue.js, we can assign a ref to the element we want to get the height for.

Categories
Vue Answers

How to Output a Comma-Separated Array with Vue.js?

Sometimes, we want to output a comma-separated array with Vue.js.

In this article, we’ll look at how to output a comma-separated array with Vue.js.

Output a Comma-Separated Array with Vue.js

To output a comma-separated array with Vue.js, we can use the v-for directive.

For instance, we can write:

<template>
  <div id="app">
    <span v-for="(list, index) in lists" :key="list">
      <span>{{ list }}</span>
      <span v-if="index + 1 < lists.length">, </span>
    </span>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      lists: ["Vue", "Angular", "React"],
    };
  },
};
</script>

We use the v-for directive to render the list array into a comma-separated list.

We add a comma only when index + 1 < lists.length so we only add the commas between the words.

A shorter way to render the words in the array into a comma-separated list is to use the array join method.

For example, we can write:

<template>
  <div id="app">
    <span>{{ lists.join(", ") }}</span>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      lists: ["Vue", "Angular", "React"],
    };
  },
};
</script>

to combine the words with the join method in the template.

Either way, we get:

Vue, Angular, React

rendered on the screen.

Conclusion

To output a comma-separated array with Vue.js, we can use the v-for directive.

A shorter way to render the words in the array into a comma-separated list is to use the array join method.

Categories
Vue Answers

How to Get the Text of the Selected Option Using Vue.js?

Sometimes, we want to get the text of the selected option using Vue.js.

In this article, we’ll look at how to get the text of the selected option using Vue.js.

Get the Text of the Selected Option Using Vue.js

To get the text of the selected option using Vue.js, we can get the selected value by setting the value prop of the option element to an object.

Then we can bind the selected value prop to a reactive property with v-model .

For instance, we can write:

<template>
  <div id="app">
    <select v-model="selected">
      <option :value="p" v-for="p of products" :key="p.id">
        {{ p.name }}
      </option>
    </select>
    <p>{{ selected.name }}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      selected: {},
      products: [
        { id: 1, name: "apple" },
        { id: 2, name: "orange" },
        { id: 3, name: "grape" },
      ],
    };
  },
};
</script>

We pass in p as the value of the value prop.

And we bind the selected option’s value prop value to the selected reactive property with v-model .

Then when we select an option from the dropdown, we can get its name property value to get the text of the selected option.

Conclusion

To get the text of the selected option using Vue.js, we can get the selected value by setting the value prop of the option element to an object.