我正在制作一个搜索栏组件。如果用户在搜索字段中输入的值长度大于 1,我希望在右侧显示一个小十字按钮。
这是我目前所拥有的:
模板
<template lang="pug">
.search
.search__wrapper
form.search
input#search__input(
type="search"
v-model="taskSearch"
placeholder="Search"
)
img(v-if="taskSearch.val.length < 1").resetText(src="../../assets/icons/cross-icon.svg")
</template>
我测试了 if 语句:
a: (v-if="0 < 1")
b: (v-if="2 < 1")
它完美地工作 - (a) 隐藏按钮和 (b) 使它出现。我只是不知道 Vue.js 语法从该特定字段中选择用户的输入值长度。
有什么想法吗?
最佳答案
正如@Belmin Bedak 所说,从您的 v-if 中删除 .val。 taskSearch 是值而不是元素。
此外,它不应该大于 0,例如v-if=“taskSearch.length > 0” 因为那是你想要显示它的时候,当它的字符数多于 0(或者 1 如果那是你真正想要的,但它必须大于不小于)。
关于javascript - Vue.js:搜索栏组件 - 如果输入值长度 > 1,如何使重置按钮出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46342384/