Vuetify 多个 v-select 所需规则不起作用

2024-01-05

重现步骤:

如果它的多个选择所需的规则不起作用,如果它不是多个也可以。

预期行为

规则也适用于多重选择

实际行为

如果是多重选择,则规则不起作用

复制代码:

 <div id="app">
     <v-app id="inspire">
      <v-select
         :items="role"
         label="Admin level*"
         class="mt-3 "
         @focus="reset"
         item-text="name"
         item-value="name"
         v-model="roleee"
         required
         :rules="rules.select"
      ></v-select>
      <v-select
         :items="subsidiaries"
         label="Subsidiary*"
         class="mt-3 "
         @focus="reset"
         item-text="name"
         item-value="name"            
         v-model="subsidiariesss"
         multiple
         required
         :rules="rules.select"
         :menu-props="{ bottom: true, offsetY: true }"
       ></v-select>
      </v-app>
     </div>
     <script>
        new Vue({
        el: '#app',
        data: {
         role:[
          {name:'Admin', id:1},
          {name: 'SuperAdmin', id:2}
          ], 
          subsidiaries: [
           {name: "ASdsad", id:1},
           {name: "dsd", id:2},
           {name: "34", id:3},
           {name: "ASvxcdsad", id:4}
          ],
          rules: {
           select: [v => !!v || 'Item is required'] 
          }
          },
        methods: {
         reset() {
          this.$refs.form.resetValidation();
         },
        }
       })
      </script>

您应该添加另一个名为select2它验证所选项目的长度:

 rules: {
      select: [(v) => !!v || "Item is required"],
      select2: [(v) =>  v.length>0 || "Item is required in select 2"],
      
    }

然后将其绑定到第二个选择,如下所示:

 <v-select
         :items="subsidiaries"
         label="Subsidiary*"
         class="mt-3 "
         @focus="reset"
         item-text="name"
         item-value="name"            
         v-model="subsidiariesss"
         multiple
         required
         :rules="rules.select2"
         :menu-props="{ bottom: true, offsetY: true }"
       ></v-select>

现场演示 https://codepen.io/boussadjra/pen/dyMLxzv

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vuetify 多个 v-select 所需规则不起作用 的相关文章

随机推荐

  • 相当于 Clojure 函数的 Java toString()

    我正在使用一些 Java 代码调用toString 在我的 Clojure 函数对象上 它返回类似的内容
  • 为什么在 Weblogic 集群中使用单播与组播

    从文档中并不清楚为什么应该在 WebLogic 集群中使用单播而不是多播 有人有使用这两者的经验以及迁移到 Unicast 的好处吗 单播和组播的主要区别如下 Unicast 假设集群中有三台服务器 MS 1 MS 2 MS 3 如果它们必
  • 如何跟踪 Node.js 中的(更改的)日志文件

    好吧 这似乎是一个简单的问题 但我无法从这里找到答案 因此我将其发布 希望有人可能遇到类似的问题 我需要监视指向 Web 服务器文件的符号链接 var log lighttpd error log更具体地说 感谢莱纳斯 G 蒂尔 https
  • WebElement.getCssValue 和 WebElement.getAttribute 用法

    任何人都可以帮助我了解如何使用这两个函数来获取任何 CSS 属性的值 如果有一个特定的 img 标签如下 img title Title alt myTitle src A B C xyz png driver getElement By
  • 在 QT 项目中使用 Crypto++ 静态库

    我已经在我的系统上静态构建了 cryptopp 它也通过了所有测试 这些是我在测试期间收到的警告 WARNING CRYPTOPP NO UNALIGNED DATA ACCESS is not defined in config h WA
  • 如何使用 Chrome 的调试器协议从时间戳导出 walltime?

    我一直在构建一个 Chrome 扩展程序 部分使用Chrome 调试器协议 https chromedevtools github io debugger protocol viewer 中的某些事件网络域 https chromedevt
  • 在 Xcode 中构建时添加变量

    我有一些动态值需要根据我在 Xcode 中进行的构建类型进行更改 我创建了2个方案DEV and PROD并在每个中设置环境变量 然后我在代码中使用它们 如下所示 var serviceDomain String let envVar Pr
  • 什么时候应该使用Task.Run()而不是await?

    我正在存储数据模型的状态 我克隆数据模型 然后希望将其异步写入 磁盘 我应该使用 Task Run 在后台线程上运行它吗 或者我应该将其设为异步函数而不是等待它 这将使其在 UI 线程上运行 与此类似 但我的问题有点不同 异步任务 使用 M
  • Android 使元素仅出现在纵向视图中

    我有一个支持广告的应用程序 因此 当屏幕旋转时 广告仍然存在 我希望能够使广告仅在手机处于纵向而不是横向时存在 我是否需要声明一个单独的景观 xml 或者是否有其他方法可以做到这一点 如果我需要声明一个横向 xml 我该如何在 java 中
  • C# 中的队列实现

    我正在处理一次只能处理 1 个命令的硬件资源 我将通过 Web 界面公开它的一些 API 函数 因此显然一次很有可能发送超过 1 个命令 我决定在提交这些命令时对其进行排队是确保串行处理的最佳方法 我计划在静态类中实现队列 Web 应用程序
  • Intellij Idea 日志 GradleConnectionException:构建时无法使用 Gradle 安装执行构建

    我使用 Intellij Idea 13 1 1 在构建时遇到 GradleConnectionException Error org gradle tooling GradleConnectionException Could not e
  • pty 和 tty 是什么意思?

    我注意到很多提到pty and tty在一些开源项目中 有人可以告诉我它们是什么意思以及它们之间有什么区别吗 tty原本的意思是 电传打字机 and pty means 伪电传打字机 在 UNIX 中 dev tty 是任何像 电传打字机
  • 为什么迭代 std::array 比迭代 std::vector 快得多?

    编者注 启用优化的后续问题仅对循环进行计时 为什么迭代 std vector 比迭代 std array 更快 https stackoverflow com questions 57125253 why is iterating thou
  • CSS 列表项宽度/高度不起作用

    我尝试制作一个导航内联列表 你可以在这里找到它 http www luukratief design nl dump parallax para html http www luukratief design nl dump paralla
  • 如何在 Vim 中将每行的前两个大写字符更改为小写?

    我有以下文字 HELLO TO STACKOVERFLOW WELCOME TO STACKOVERFLOW 我希望将文本更改如下 heLLO TO STACKOVERFLOW weLCOME TO STACKOVERFLOW 我怎样才能在
  • Marshal.StructureToPtr 在模块 ntdll.dll 中失败

    我将从一点历史 我目前面临的问题是突然出现的 没有对代码进行任何更改 3天后又以同样的方式消失 现在它一周后就回来了并且不想消失 I have 适用于打印机的代码 设置打印机首选项以指定方式打印文档 我使用本地打印机 它指向网络打印机的 T
  • 如何通过 GitHub API 获取 dependentabot 警报列表?

    我如何获取可用的 dependentabot 警报列表通过 GitHub API 我搜遍了文档 https docs github com en rest但在那里找不到任何东西 Thanks 有这个存储库漏洞警报 https docs gi
  • 组合两个聚合源

    有什么简单的组合方法feed and feed2 我想要的物品来自feed2要添加到feed 我也想避免重复feed当问题同时使用 WPF 和 Silverlight 标记时 可能已经有项目 Uri feedUri new Uri http
  • php+curl无法设置post方法

    我尝试使用 php 和curl 发出发布请求 这是我的代码 PHP 5 3 5 and curl 7 18 2 ch curl init if empty save cookie curl setopt ch CURLOPT COOKIEJ
  • Vuetify 多个 v-select 所需规则不起作用

    重现步骤 如果它的多个选择所需的规则不起作用 如果它不是多个也可以 预期行为 规则也适用于多重选择 实际行为 如果是多重选择 则规则不起作用 复制代码 div div