Category: Vue Answers

Sometimes, we want to submit form in Vue.js with Ajax and JavaScript.

In this article, we’ll look at how to submit form in Vue.js with Ajax and JavaScript.

How to submit form in Vue.js with Ajax and JavaScript?

To submit form in Vue.js with Ajax and JavaScript, we can create a FormData instance from the form values.

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>
      <form @submit.prevent='submit'>
        <input name='title'>
        <input name='content'>
        <input type='submit'>
      </form>
    </div>
  `,
  methods: {
    async submit(e) {
      fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        body: new FormData(e.target),
      })
    }
  }
})

to add a form.

We set the @submit.prevent directive to submit run submit when we click Submit.

In submit, we create a FormData instance by passing e.target into it, where e.target is the form element.

As a result, when we click Submit, the form values with the name attribute values as the keys and the input values as their corresponding values will be submitted.

Conclusion

To submit form in Vue.js with Ajax and JavaScript, we can create a FormData instance from the form values.

Sometimes, we want to invert boolean inline on click with Vue.js and JavaScript.

In this article, we’ll look at how to invert boolean inline on click with Vue.js and JavaScript.

How to invert boolean inline on click with Vue.js and JavaScript?

To invert boolean inline on click with Vue.js and JavaScript, we can set the @click directive to a statement to toggle the boolean.

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>
      <button @click='toggle = !toggle'>
        {{ toggle ? 'show' : 'hide' }}
      </button>
    </div>
  `,
  data: {
    toggle: true
  },
})

to set @click to toggle = !toggle to toggle the toggle reactive property.

And we display show' if toggleistrue` and ‘hide’ otherwise.

Therefore, when we click the button, we see the button text switch between ‘show’ and ‘hide’.

Conclusion

To invert boolean inline on click with Vue.js and JavaScript, we can set the @click directive to a statement to toggle the boolean.

Sometimes, we want to check if variable is empty or null with Vue v-if and JavaScript.

In this article, we’ll look at how to check if variable is empty or null with Vue v-if and JavaScript.

How to check if variable is empty or null with Vue v-if and JavaScript?

To check if variable is empty or null with Vue v-if and JavaScript. we can set v-if to the variable we want to check.

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>
      <div v-if='archiveNote'>
      	{{archiveNote}}
      </div>
    </div>
  `,
  data: {
    archiveNote: undefined
  },
  mounted() {
    setTimeout(() => {
      this.archiveNote = 'note'
    }, 1000)
  }
})

to check if archiveNote is truthy before we show the div.

In the mounted hook, we set this.archiveNote to 'note' which will make it truthy in the setTimeout callback which will run in 1 second after mounted is run.

Conclusion

To check if variable is empty or null with Vue v-if and JavaScript. we can set v-if to the variable we want to check.

Sometimes, we want to check if image URL is valid or broken with Vue.js.

In this article, we’ll look at how to check if image URL is valid or broken with Vue.js.

How to check if image URL is valid or broken with Vue.js?

To check if image URL is valid or broken with Vue.js, we can handle the error event triggered by the img element.

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>
    	<img src='abc' @error='onError'>
    </div>
  `,
  methods: {
    onError() {
      console.log('img failed to load')
    }
  }
})

to add an img element into the template.

And we set @error to onError to run onError when the image fails to load.

Since the img element’s src attribute isn’t a valid URL, onError will run.

Conclusion

To check if image URL is valid or broken with Vue.js, we can handle the error event triggered by the img element.