vue.js 使用类星体q场验证时的自动对焦

tzxcd3kk  于 2023-06-24  发布在  Vue.js
关注(0)|答案(2)|浏览(180)

我正在用类星体建立一个表格,并使用内部验证。我有一组复选框。用户应至少选择其中一个。我已经管理了表单提交的验证,但唯一让我烦恼的是:如果验证失败(也就是用户没有选择任何复选框),那么就不会关注该字段,因为我使用内部验证的所有其他字段都是如此。我猜这和我使用q场(而不是q输入)有关。
下面是我的代码:

<q-field v-model="selectedFruits"
         class="q-gutter-sm"
         :rules="[ val => val.length >= 1 || 'Select at least one fruit']"
         :disable="isReadOnly()">
                <q-checkbox v-model="selectedFruits" val="Apple" label="Apple"/>
                <q-checkbox v-model="selectedFruits" val="Banana" label="Banana"/>
                <q-checkbox v-model="selectedFruits" val="Pear" label="Pear"/>
                <q-checkbox v-model="selectedFruits" val="Peach" label="Peach"/>
</q-field>

有人有提示吗?

k5ifujac

k5ifujac1#

我发现你的代码工作,因为我知道你期望它除了绑定禁用,我注意到这是一个错误,因为链接到一个方法!
我用quasar@1.15.23进行了测试,最后一个未选中的复选框在显示验证错误后具有焦点,然后单击键盘上的 * 空格 * 变为选中。

const app = new Vue({
  el: '#root',
  data: {
    selectedFruits: []
  }
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/quasar@1.15.23/dist/quasar.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.15.23/dist/quasar.umd.min.js"></script>

<div id="root">
  <div class="row justify-center">
    <div class="row justify-center">
      <q-field v-model="selectedFruits"
         class="q-gutter-sm"
         :rules="[ val => val.length >= 1 || 'Select at least one fruit']"
         >
                <q-checkbox v-model="selectedFruits" val="Apple" label="Apple"/>
                <q-checkbox v-model="selectedFruits" val="Banana" label="Banana"/>
                <q-checkbox v-model="selectedFruits" val="Pear" label="Pear"/>
                <q-checkbox v-model="selectedFruits" val="Peach" label="Peach"/>
</q-field>
    </div>
  </div>

  
<!--   :disable="isReadOnly()" -->
</div>
8gsdolmq

8gsdolmq2#

如果你使用Vue3(复合API脚本设置),只需在字段中调用ref并添加.focus()
示例:

<template>
    <input type="text" ref="nameRef " v-model="name">
  <button @click="focus" value="Focus">
 </template>
<script setup>
   import {ref} from "vue"
   const name = ref("");
   const nameRef = ref(null);
     const focus = () => {
             nameRef.value.focus();
          }
</script>

相关问题