Category: Vue

Categories
JavaScript Answers Vue Answers

How to get coordinates of a mouse click in Vue.js and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to get coordinates of a mouse click in Vue.js and JavaScript.

In this article, we’ll look at how to get coordinates of a mouse click in Vue.js and JavaScript.

How to get coordinates of a mouse click in Vue.js and JavaScript?

To get coordinates of a mouse click in Vue.js and JavaScript, we can use get the properties of the mouse click event object.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div @click='onClick'>
    	click me
    </div>
  `,
  methods: {
    onClick(e) {
      console.log(event.clientX);
      console.log(event.clientY);
      
      console.log(event.pageX);
      console.log(event.pageY);
      
      console.log(event.screenX);
      console.log(event.screenY);
    }
  }
})

to add a div with a click handler.

When we click the div, onClick is run.

Then from the e parameter of onClick, we get the position of the click in various ways.

clientX and clientY give the coordinates of the mouse relative to the viewport in CSS pixels.

pageX and pageY give the coordinates of the mouse relative to the <html> element in CSS pixels.

screenX and screenY give the coordinates of the mouse relative to the screen in device pixels.

Conclusion

To get coordinates of a mouse click in Vue.js and JavaScript, we can use get the properties of the mouse click event object.

Categories
JavaScript Answers Vue Answers

How to fix newline character is not rendered correctly with Vue.js and JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to fix newline character is not rendered correctly with Vue.js and JavaScript.

In this article, we’ll look at how to fix newline character is not rendered correctly with Vue.js and JavaScript.

How to fix newline character is not rendered correctly with Vue.js and JavaScript?

To fix newline character is not rendered correctly with Vue.js and JavaScript, we can set the white-space CSS property to pre.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div style="white-space: pre;">{{ text }}</div>
  `,
  data: {
    text: 'Hello Vue.\nThis is a line of text.\nAnother line of text.\n'
  },
})

We render the newline characters in text by setting the white-space CSS property to pre.

Therefore, we get:

Hello Vue.
This is a line of text.
Another line of text.

displayed.

Conclusion

To fix newline character is not rendered correctly with Vue.js and JavaScript, we can set the white-space CSS property to pre.

Categories
JavaScript Answers Vue Vue Answers

How to upload an image in Vue.js?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to upload an image in Vue.js.

In this article, we’ll look at how to upload an image in Vue.js.

How to upload an image in Vue.js?

To upload an image in Vue.js, we can add a file input.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <p>
      <input type="file" accept="image/*" @change="uploadImage">
      <img :src="previewImage" />
    </p>
  `,
  data: {
    previewImage: undefined
  },
  methods: {
    uploadImage(e) {
      const [image] = e.target.files;
      const reader = new FileReader();
      reader.readAsDataURL(image);
      reader.onload = e => {
        this.previewImage = e.target.result;
        console.log(this.previewImage);
      };
    }
  }
})

We add the file input and img element to preview the image.

Then we set the change event handler of the input to uploadImage.

In uploadImage, we get the first selected file from e.target.files.

Then we create a new FileReader instance and call readAsDataURL with image to read it into a base64 string.

Then we set this.previewImage to `e.target.result, which has the base64 image string.

As a result, when we select an image with the file input, we see the image displayed.

Conclusion

To upload an image in Vue.js, we can add a file input.

Categories
JavaScript Answers Vue

How to access key from child component with Vue.js?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to access key from child component with Vue.js.

In this article, we’ll look at how to access key from child component with Vue.js.

How to access key from child component with Vue.js?

To access key from child component with Vue.js, we should pass in the key value as a prop.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and the app container.

Then we write:

const Foo = {
  template: `<p>{{index}}</p>`,
  props: ['index']
}

const v = new Vue({
  el: '#app',
  template: `
    <div>
    	<foo :key='i' :index='i' v-for='i of arr' />
    </div>
  `,
  data: {
    arr: [1, 2, 3, 4, 5]
  },
  components: {
    Foo
  }
})

to define the Foo component that takes the index prop.

And then we use v-for to loop through arr and render the foo component with the index prop set to i, which is an entry of arr.

key is reserved so we can’t use it as a prop name.

We also have to register Foo in the components property to render Foo.

Therefore, we see:

1

2

3

4

5

rendered.

Conclusion

To access key from child component with Vue.js, we should pass in the key value as a prop.

Categories
JavaScript Answers Vue

How to create a simple 10 seconds countdown in Vue.js?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to create a simple 10 seconds countdown in Vue.js.

In this article, we’ll look at how to create a simple 10 seconds countdown in Vue.js.

How to create a simple 10 seconds countdown in Vue.js?

To create a simple 10 seconds countdown in Vue.js, we can use the setInterval function.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `<p>{{timerCount}}</p>`,
  data: {
    timerCount: 10
  },
  mounted() {
    const timer = setInterval(() => {
      this.timerCount--;
      if (this.timerCount === 0) {
        clearInterval(timer)
      }
    }, 1000);
  }
})

We call setInterval with a callback to decrement this.timerCount every second until it reaches 0.

When it reaches 0, then we call clearInterval with timer to clear the timer.

We call setInterval in the mounted hook to start the timer when the component is mounted.

Counclsion

To create a simple 10 seconds countdown in Vue.js, we can use the setInterval function.