将此标记用于特定于Vue.js版本2的问题，这是一个用于构建用户界面的开源，渐进式Javascript框架。
我有一个输入字段： 姓名 我有一个输入字段： <Fieldset> <label for="name" slot="label" class="label">Name</label> <div class="input-group"> <input id="name" v-model="name" class="form-control" :class="{ 'is-invalid': isNameInvalid }"/> <div class="invalid-feedback" v-if="isNameInvalid"> Please enter a valid name. </div> </div> </Fieldset> 我正在尝试添加此验证。因此，当输入字段为空且提交表单时，应显示无效反馈元素。但如果用户输入更多内容，则不应显示该元素。基本验证，但我无法申请。这就是我正在做的事情： export default { data() { return { name: '' isNameInvalid: true, }; }, methods: { submitForm() { if (!this.isNameInvalid) { //submit form and clean form } }, validateName() { this.isNameInvalid = this.name === ''; }, }, } 当输入值发生变化以及提交表单时，您需要调用validateName。 更新您的 HTML： <input id="name" v-model="name" class="form-control" :class="{ 'is-invalid': isNameInvalid }" @input="validateName"/> 和你的 vue 组件： export default { data() { return { name: '', isNameInvalid: false, }; }, methods: { submitForm() { this.validateName(); if (!this.isNameInvalid) { //submit form } }, validateName() { this.isNameInvalid = this.name.trim() === ''; }, }, } 这将在每次输入更改和表单提交时触发 validateName，检查名称字段是否为空。 希望这有帮助！
我使用 Nuxt.js，并且有一个自定义组件。 该组件在组件中有css，使用css设置背景图片。 我已尝试以下操作，但运行时出现错误。 呃...
我正在循环一个表单，但第一个表单的数据继续显示在第二个表单中 这就是我的形式 我正在循环一个表单，但第一个表单的数据继续显示在第二个表单中 这就是我的形式 <div class="container" v-for="(passenger, passengerIndex) in passengers" :key="passengerIndex" > <div class="col-md-6 form-group"> <label for="firstName">First Name</label> <input type="text" class="form-control" id="firstName" v-model="passenger.FirstName" > </div> 这是我的回报 passengers: [ { FirstName: "", } ], 这是我在第一行中为表单输入的任何内容，它会在第二行中显示 请问我该怎么办 如果您使用的是 Vue 3，您可以轻松地在数组中使用 Ref 以获得此更改 <script setup lang="ts"> import { ref } from 'vue' interface Passenger { firstname: string lastname: string } // update v-model const passengers = ref<Passenger[]>([ { firstname: 'John', lastname: 'Doe', } ]) </script> <template> <div v-for="(passenger, passengerIndex) in passengers"> <label>first name {{ passenger.firstname }}</label> <input v-model="passenger.firstname" /> </div> </template> 希望这对您有帮助
Vue 3 新的 Reactivity API 中 Vue.delete 的替代方案是什么？
如何在 Vue.js 中引用“<slot></slot>”中的文本
如何引用 Vue.js 中的文本？ Vue.component('组件', { 模板：``， 创建：函数（）{ // 我想访问...
TypeError：无法读取未定义的属性（读取“集合”）-Vuejs 和 Firebase
我正在尝试开发一个包含任务的日历。我正在尝试使用 firebase，但它不断给出错误，表示它不理解“collection()”属性。我已经研究过了...
我在项目根目录中有 .env 文件，在我的 nuxt 配置中，我使用变量来配置 ReCaptcha，如下所示： 从“dotenv”导入 dotenv dotenv.config() 导出默认值{ 模块：[ ...
所以我正在使用 Vuejs / Vuetify 创建一个 Web 表单，我需要为用户提供一个编辑现有数据的选项。当我在编辑页面时，我有一个“item”对象，其中包含所有属性/...
我有一个数组，其中包含另一个数组，其中包含名称和数据。 我想创建第二个对象，其中包含数组中日期小于当前日期的项目...
我目前正在尝试将基于表单的项目从vue迁移到react。我的做法是重写react中的每个vue组件，然后将react组件提供给表单 而不是...
我有一个 Vue 组件，它有一个名为“title”的 prop，例如： 导出默认值{ 道具：['标题']， 数据（） { 返回 { } } } 我导航到该组件
Vuetify 更改 v-data-table 页脚中每页文本的行数
我正在使用 Vuetify 的 v-data-tables 和...... 我想更改此文本： 我已添加此代码，但它不起作用： 谢谢！
所以我有这个奇怪的问题。 我有一个运行 vue2 和 vuex3 的 vue 应用程序。 该应用程序在我的 MacBook pro（英特尔芯片）和许多其他设备上运行得非常好。 然而，我们看到一些问题，其中一些计算
无法通过 Firefox 扩展中的 CDN 文件使用 Vue JS
我正在尝试创建一个 Firefox 扩展并在 Vue JS 中准备好它。我正在使用 Vue JS 的 Production CDN 版本 这是我的 manifest.json 的样子： { “姓名”：“...
PrimeVue 2 - 日历 - ：日期选择无法正常工作 - Vue.js2
我有两个不同的日历，我只想在其中一个上使用 ':date-select' 功能。 但是，当我在日历上选择没有 ':date-select' 的日期时，'validarDatas()'
早上好， 我有一个用 Django Rest Framework 编写的 API。前端是用VueJS编写的。我有一个表单视图，它是“添加新视图”或“修改视图”。基本上，形式是相同的代码，但是
//TypeError: this.ONE_FILM.actors 未定义 {{ actor }}&l... //TypeError: this.ONE_FILM.actors 未定义 <template> <ul v-for="actor in allActors"; :key="actor.id"; > <li>{{ actor }}</li> </ul> </template> <script> import {mapGetters, mapActions} from "vuex"; computed: { ...mapGetters(["ONE_FILM"]), allActors() { return this.ONE_FILM.actors.split(",") }, allVoiceActors() { return this.ONE_FILM.rolesDuplicated.split(",") }, } </script>
我正在使用我的 Vue 组件开发一个 npm 包，这样我就可以在我的所有应用程序中重复使用它们，并使原型制作过程更快。 几乎一切都工作正常，除了我正在尝试的自定义字体......