javascript - 如果输入字段为空则显示错误消息，否则没有消息 Vue.js

Question

如果用户未在搜索框中输入任何内容，我想显示一条错误消息，但是当他们开始输入时，消息就会消失。到目前为止，我已经显示了错误消息，但一旦用户开始输入

，该消息就不会消失

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>

代码。我确信这很简单，但我看不到在哪里？我的代码是:

Answer 1

如果用户未在搜索框中输入任何内容，我想显示一条错误消息，但是当他们开始输入时，该消息就会出现。

考虑你的问题 -

您需要双向绑定(bind)来解决此问题。无需观看!

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>