Category: JavaScript

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

How to add onclick event programmatically with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to add onclick event programmatically with JavaScript.

In this article, we’ll look at how to add onclick event programmatically with JavaScript.

How to add onclick event programmatically with JavaScript?

To add onclick event programmatically with JavaScript, we can set the onclick property of an element.

For instance, we write:

<button>
  click me
</button>

to add a button.

Then we write:

const button = document.querySelector('button')
button.onclick = () => {
  console.log('clicked')
}

to select the button with querySelector.

Then we set the button.onclick property to a function that logs 'clicked'.

As a result, we see 'clicked' logged when the button is clicked.

Conclusion

To add onclick event programmatically with JavaScript, we can set the onclick property of an element.

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

How to find the nth occurrence of a character in a string in JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we to find the nth occurrence of a character in a string in JavaScript.

In this article, we’ll look at how to find the nth occurrence of a character in a string in JavaScript.

How to find the nth occurrence of a character in a string in JavaScript?

To find the nth occurrence of a character in a string in JavaScript, we can use the string indexOf method with the from index argument.

For instance, we write:

const indexOfNth = (string, char, nth, fromIndex = 0) => {
  const indexChar = string.indexOf(char, fromIndex);
  if (indexChar === -1) {
    return -1;
  } else if (nth === 1) {
    return indexChar;
  } else {
    return indexOfNth(string, char, nth - 1, indexChar + 1);
  }
}

const str = 'foobarfoobaz'
console.log(indexOfNth(str, 'o', 3))

We define the indexOfNth function that recursively calls string.indexOf with fromIndex as the 2nd argument to start searching from fromIndex.

If indexOf returns -1, we return -1 since char isn’t in string.

If indexOf returns 1, then we found the index of the nth occurrence so we return indexChar.

Otherwise, we keep searching by calling indexOfNth with nth - 1 and indexChar + 1.

Therefore, 7 is logged from the console log since the 3rd o is at index 7.

Conclusion

To find the nth occurrence of a character in a string in JavaScript, we can use the string indexOf method with the from index argument.

Categories
JavaScript Answers

How to sum of input values in sections with JavaScript?

closeup photo of yellow Labrador retriever puppy

Sometimes, we want to sum of input values in sections with JavaScript.

In this article, we’ll look at how to sum of input values in sections with JavaScript.

How to sum of input values in sections with JavaScript?

To sum of input values in sections with JavaScript, we can convert the node list of inputs to an array.

Then we can use the array map and reduce methods to add the values together.

For instance, we write:

<form>
  <input type="number" value="2" />
  <input type="number" value="0" />
  <input type="number" value="1" />
  <input type="number" value="3" />
  <input type='submit'>
</form>

to add a form.

Then we select the form and input elements with querySelector and querySelectorAll.

Then we set the form.onsubmit property to the form submit handler.

In it, we call e.preventDefault to stop the default submission behavior.

Then we spread the inputs into an array.

Next, we call map with a callback to get the input value and convert them to numbers.

Finally, we call reduce with a callback to add all the numbers together.

Therefore, sum is 6 according to the console log.

Conclusion

To sum of input values in sections with JavaScript, we can convert the node list of inputs to an array.

Then we can use the array map and reduce methods to add the values together.