vue.js 如何检查v-text-field是否有成功状态(或任何规则失败)？

ycl3bljg 于 2023-01-14 发布在 Vue.js

关注(0)|答案(1)|浏览(192)

我有一个控制输入的组件（例如v-text-field）。这个组件提供了一些属性，例如输入的字段规则。每当输入值通过每个规则/进入成功状态时，我想调用一个函数。
给定以下示例代码
生殖环节

<template>
  <v-app>
    <v-main>
      <v-text-field v-model="msg" :rules="[ v => v.length > 0 || 'required' ]" @update:model-value="onInput" />
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('')

function onInput(newValue) {
  if(true /* text-field has success state => do things */) {
    console.log(newValue);
  }
}
</script>

如何检查此字段是否通过了所有规则？我无法在文档中找到事件
我认为再次运行每个规则函数是个坏主意。

vue.js

来源：https://stackoverflow.com/questions/75109635/how-to-check-if-v-text-field-has-success-state-or-any-rule-failed

1条答案

按热度按时间

7eumitmz1#

您应该使用v-form组件 Package 您的输入，该组件以表单验证状态（false/true）作为参数来触发输入事件：

<template>
  <v-app>
    <v-main>
       <v-form @update:model-value="onInput" >
         <v-text-field v-model="msg" :rules="[ v => v.length > 0 || 'required' ]"  />
      </v-form>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref } from 'vue'

const msg = ref('')

function onInput(newValue) {
  if(newValue) {
    console.log('passed ',newValue);
  }
}
</script>

演示

赞(0）回复(0）举报 2023-01-14

我来回答

vue.js 如何检查v-text-field是否有成功状态(或任何规则失败)？

1条答案

相关问题

热门标签

最新问答