CODEWITHSUNDEEP
javascriptvue.jsvue-component
Sole
Sole

Reputation: 3340

Show error message if input field empty otherwise no message Vue.js

I want to show an error message if the user does not input anything in a search box, however when they start entering input the message goes. So far I have got the error message to display but the message does not disappear once the user starts entering the 

new Vue({
  el: "#app",
  name: "Hero",
  props: {
    navLink: String
  },
  data: function() {
    return {
      title: "Simple Search",
      intro: "This is a simple hero unit, a simple jumbotron-style.",
      subintro: "It uses utility classes for typography and spacing to space content out.",
      result: [],
      errors: [],
      search: "",
      loading: ""
    };
  },

  watch: {
    search: function(val) {
      if (!val) {
        this.result = [];
      }
    }
  },

  methods: {
    getData: function() {
      this.loading = true;
      fetch(`https://itunes.apple.com/search?term=${this.search}&entity=album`)
        .then(response => response.json())
        .then(data => {
          this.result = data.results;
          this.loading = false;
          console.log(data);
        });
      if (this.search) return true;
      this.errors = [];
      if (!this.search) this.errors.push("Enter search field.");
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app">
  <template>
      <div class="jumbotron">
        <h1 class="display-4">{{title}}</h1>
        <p class="lead">{{intro}}</p>
        <hr class="my-4">
        <p v-if="errors.length">
          <b>Please correct the following error(s):</b>
        </p>
        <p v-for="(error, index ) in errors" :key="index">{{ error }}</p>
        
        <input class="form-control form-control-lg mb-3" type="search" placeholder="Search"
     aria-label="Search" v-model="search" required >
    
        <div class="loading" v-if="loading"></div>
    
        <table class="table table-sm table-light table-bordered" v-if="result.length">
          <thead class="thead-dark">
            <tr class="col-8">
              <th scope="col">Name</th>
              <th scope="col">Artist</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(result, index) in result" :key="index">
              <td>{{result.collectionName}}</td>
              <td>{{result.artistName}}</td>
            </tr>
          </tbody>
        </table>
        <button
          class="btn btn-success btn-lg btn-block mb-3"
          type="submit"
          v-on:click="getData"
          v-if="result.length < 1"
        >Get data</button>
      </div>
    </template>
</div>

code. I'm sure it is something simple but I can't see where? My code is:

Upvotes: 0

Views: 9647

Answers (1)

Satyam Pathak
Satyam Pathak

Reputation: 6912

I want to show an error message if the user does not input anything in a search box, however when they start entering input the message goes.

Considering your problem -

You need two-way binding to fix this issue. No watching required ! 

new Vue({
  el: "#app",
  data() {
  	return {
      isValidationAllowed: false,
    	searchTerm: ''
    }
  },
  computed: {
    validated() {
      return this.isValidationAllowed && !this.searchTerm
    }
  },
  methods: {
    validate() {
      this.isValidationAllowed = true
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 <input type="text" v-model="searchTerm">
 <p v-if="validated">Hey You got the error</p>
 <button @click="validate">Submit </button>
</div>

Upvotes: 1

Related Questions