如果用户没有在搜索框中输入任何内容，我想显示一条错误消息，但是当他们开始输入时，消息就会消失。到目前为止，我已经收到了要显示的错误消息，但是一旦用户开始输入该消息，该消息就不会消失
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>代码。我确定这很简单，但我看不到在哪里？我的代码是：
如果用户没有在搜索框中输入任何内容，我想显示一条错误消息，但是当他们开始输入时，消息就会消失。
考虑到你的问题——
您需要two-way绑定来解决此问题。不需要watching！
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句