javascript - Vue.js:搜索栏组件 - 如果输入值长度 > 1，如何使重置按钮出现？

Question

我正在制作一个搜索栏组件。如果用户在搜索字段中输入的值长度大于 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 语法从该特定字段中选择用户的输入值长度。

有什么想法吗？

Answer 1

正如@Belmin Bedak 所说，从您的 v-if 中删除 .val。 taskSearch 是值而不是元素。

此外，它不应该大于 0，例如v-if=“taskSearch.length > 0” 因为那是你想要显示它的时候，当它的字符数多于 0(或者 1 如果那是你真正想要的，但它必须大于不小于)。