使用Trim方法如何删除vuejs中的空格/回车

Question

processSearch() {
this.search.trim().length>0;
// this.searchHistory.push(this.search);
this.search = ''; 
},

preventLeadingSpace(e) {
// only prevent the keypress if the value is blank
if (!e.target.value) e.preventDefault();
// otherwise, if the leading character is a space, remove all leading white-space
else if (e.target.value[0]==' ') e.target.value = e.target.value.replace(/^s*/, "");
},

<input

id="SearchText"
type="text"
v-model="search"
@keydown.enter="enter"
@click="onClick"
@keyup.enter="processSearch"
@input="change"
@keyup="inputChanged"
@keydown.down="onArrow"
@keydown.up="onArrow"
@keydown.space="preventLeadingSpace"

/>

<ul class="list-inline" >

<li
class="list-inline-item list-group-item-primary"
v-for="(item, index) in searchHistory
.slice(-5)
.reverse()
.map((s) => s.trim())"
:key="index"
@click="selectPreviousSearch(index)"
>
{{ item }}
</li>
</ul>

this.search.trim().length>0
// tried using this to stop enter, But doesn't work.

我正在尝试做搜索功能，如果用户在搜索中输入任何内容，结果将显示在li中。现在的问题是，即使没有输入任何数据，只要我从键盘上点击回车键，它也会显示为li中的结果。

第二个问题是，如果是点击输入，则显示下拉列表。但当我点击外面的输入下拉列表并没有关闭。

Answer 1

为了删除空白或修剪输入，Vue提供了这样的功能。你可以使用v-model.trim试试这个：

<form @submit.prevent="processSearch">
<input
id="SearchText"
type="text"
v-model.trim="search"
@keydown.enter="enter"
@click="onClick"
@input="change"
@keyup="inputChanged"
@keydown.down="onArrow"
@keydown.up="onArrow"
@keydown.space="preventLeadingSpace"

/>
</form>

然后你的processSearch功能：

processSearch() {
if(this.search){
this.searchHistory.push(this.search); this.search = '';
} 
} 

Answer 2

让我帮助您避免<li>项目上的重复

.... 
data(){
return{
items: [], 
search: "" 
} 
}, methods:{
processSearch() {
if(this.search){
this.searchHistory.push(this.search); this.search = '';
if(this.items.indexOf(this.search) === -1){
this.items.push(this.search)
} 
} 
} 
}
.... 

现在在你的列表

<ul class="list-inline"  >

<li
class="list-inline-item list-group-item-primary"
v-for="(item, index) in items
.slice(-5)
.reverse()
.map((s) => s.trim())"
:key="index"
..... 
>
{{ item }}
</li>
</ul>