vuejs2 相关问题

如果最初在 element-plus 中选中复选框，则复选框不会取消选中

我有使用 element-plus 的复选框： 我有使用 element-plus 的复选框： <el-checkbox v-model="slotProps.action.check_control" :checked="slotProps.action.check_control" size="large" class="ml-4" :id="slotProps.action.id" @change="checkControl(slotProps.action.id, slotProps.action.check_control)" /> 我用这个函数进行 api 调用：checkControl。 const checkControl = (id, controlled) => { loading.value = true if (controlled === true) { controlled = 1 } else { controlled = 0 } ApiService.postTest('api...', { jar_id: id, check_control: controlled }) .then((res) => { loading.value = false }) .catch((e) => { loading.value = false console.log(e) }) } 问题是页面渲染后，如果选中该复选框，我单击该复选框，但它会再次选中它而不是取消选中。 我不确定这是否与 element plus 有关，但这里是有关它的文档：https://element-plus.org/en-US/component/checkbox.html#checkbox-attributes <input type="checkbox" v-model="foo" /> 是的缩写 <input type="checkbox"" :checked="foo" @change="(e) => { foo = e.target.checked }" /> 请参阅表单输入绑定。 这意味着：“不要同时使用 v-model 和 :checked 在同一个 <input type="checkbox" />！” 如果删除 :checked 不能解决问题，请提供有关如何在组件上下文中填充 slotProps.action.check_control 的更多详细信息。 要初始设置 checked 的 <input /> 值，请仅使用 v-model 并确保将 v-model 设置的初始值初始设置为 true。

如何使用vue路由器检测用户是否按下后退按钮？

在 vue 路由器中，我想检测历史模式下 url 何时发生变化。然而，有时我手动推送新的网址，但我不希望检测到这些更改。更多的是当用户改变时...

Vue2 (2.5.17) 从指令发出事件并通过插槽在组件中监听

这可能是过于复杂的方法，但已经完成了。我想要的是从指令发出自定义事件，并通过插槽在父组件中监听该事件。 但重点是 -&g...

在 Vue3/Vue-test-utils 中测试 Vuex 减速器/突变

我正在迁移到Vue3，所以请原谅我不只使用Pinia。我有一个这样的减速器： 导出常量突变：MutationTree = { SET_LOADING：（状态，瞧...

Vee-validate：“不存在这样的验证器‘required_if’。”

我正在使用 vee-validate v3 和 Vue 2.7。具体来说，这是我的 package.json 中的 vee-validate 条目： "vee-validate": "^3.4.5", 我无法获得 required_if 规则

使用 nuxt-link 导航到不同页面上的锚点/哈希不起作用

我想从另一个页面导航到另一个页面的特定部分。所以我在 nuxt.config.js 文件的路由器对象中添加了scrollBehavior函数，如下所示： 路由器：{ 滚动行为（至）{ ...

将数据从 Puppeteer 传递到 Vue JS 组件

我的应用程序的数据流从后端 API 请求开始，该请求使用 puppeteer 启动 Vue 组件。有什么方法可以将数据从后端（express）传递到vue组件

VueJS - 将插槽传递给子组件的子组件

我有一个列表和一个 list_item 组件，我在应用程序中多次重复使用它们。简化形式： 联系人列表.vue 。桌子 .table-header.table-row ... 我有一个列表和一个 list_item 组件，我在应用程序中多次重复使用它们。简化形式： contact_list.vue <template lang="pug"> .table .table-header.table-row .table-col Contact .table-col Info .table-body contact-list-item(v-for='contact in contacts', :contact='contact', @click='doSomething()') </template> contact_list_item.vue <template lang="pug"> .table-row(@click='emitClickEvent') .table-col {{ contact.name }} .table-col {{ contact.info }} </template> 当我在特定组件中使用 contact_list 时，我希望能够发送一个槽，将一些新列添加到 contact_list_item 组件中。此槽将使用在 contact_list_item 组件内呈现的特定联系人的数据来生成新列。 我怎样才能做到这一点？使用插槽是最好的方法吗？ 提前致谢。 插槽是最好的方法，您需要为 contact-list-item 组件使用作用域插槽。我不太熟悉 pug，所以我将使用 HTML 作为示例。 在 contact-list 中，您将添加一个插槽。请注意，在这种情况下，联系人将作为属性传递。这样我们就可以利用作用域插槽。 <div class="table"> <div class="table-header table-row"> <div class="table-col">Contact</div> <div class="table-col">Info</div> </div> <div class="table-body"> <contact-list-item v-for='contact in contacts' :contact="contact" @click="doSomething" :key="contact.id"> <slot :contact="contact"></slot> </contact-list-item> </div> </div> 然后向 contact-list-item 添加一个插槽。 <div class="table-row" @click="emitClickEvent"> <div class="table-col">{{contact.name}}</div> <div class="table-col">{{contact.info}}</div> <slot></slot> </div> 最后，在您的 Vue 模板中，使用作用域模板。 <div id="app"> <contact-list :contacts="contacts"> <template scope="{contact}"> <div class="table-col">{{contact.id}}</div> </template> </contact-list> </div> 这是一个工作示例。我不知道您的样式是什么，但请注意 id 列现在显示在 contact-list-item 中。 您可以使用 template 将插槽注册到子组件的子组件。 还有一种情况是你想要有很多命名槽。 child.vue <template> <div> <h2>I'm a father now</h2> <grandchild :babies="babies"> <template v-for="(baby, id) in babies" :slot="baby.name"> <slot :name="baby.name"/> </template> </grandchild> </div> </template> 孙子.vue <template> <div> <p v-for="(baby, id) in babies" :key="id"> <span v-if="baby.isCry">Owe...owe...</span> <slot :name="baby.name"> </p> </div> </template> parent.vue <template> <div> <h2>Come to grandpa</h2> <child :babies="myGrandChilds"> <button slot="myGrandChilds[2].name">baby cry</button> </child> </div> </template> 添加到@DrSensor的答案。 在Vue3中，你应该使用动态槽名称。 <template> <div> <h2>I'm a father now</h2> <grandchild :babies="babies"> <template v-for="(baby, id) in babies" #[baby.name]> <slot :name="baby.name"/> </template> </grandchild> </div> </template> 这里是一个使用 Vuetify Playground 的示例演示 Vue 3 动态槽/模板传递： <template #[name] v-for="slot, name in $slots"> <slot :name="name"></slot> </template> 为了方便的将几个槽位往下平移，可以使用这个链接描述的方法，稍微修改一下，也许就能往更深的方向移动。

传单：_childCount 不等于 _markers.length

我面临传单聚类的问题。我使用 v-marker-cluster。在集群的图标 createFunction 中，我使用子 className 来确定集群的样式。这是...的一部分...

我们应该将脚本或模板放在单个文件组件中以提高生产力吗？ [已关闭]

我想知道在单个文件组件中编码最有效的方法是什么。我只是在谈论生产力，因为没有关于如何组织它们的规则。正如样式中所述

Vue Cli：npm 安装后找不到模块“../package.json”错误

我不是 Vuejs 或 Vuecli 方面的专家，但我确实设法让东西正常工作。 在使用 Vuecli3 和 webpack 之前我有一个项目，现在当我在几周后打开它进行更改时，我...

使用 Vue Router 单击视图中嵌入的路由器链接时，路由器视图不会更新

我的帖子页面底部有一个相关内容部分，其中显示其他相关帖子。 当点击相关内容时，我希望路由器能够更新页面。然而，这是...

仅在提交时验证 vuetify 文本字段

temp.vue 保存 temp.vue <v-form ref="entryForm" @submit.prevent="save"> <v-text-field label="Amount" :rules="numberRule"r></v-text-field> <v-btn type="submit">Save</v-btn> </v-form> <script> export default { data: () => ({ numberRule: [ v => !!v || 'Field is required', v => /^\d+$/.test(v) || 'Must be a number', ], }), methods: save () { if (this.$refs.entryForm.validate()){ //other codes } } } </script> 这里发生的情况是，在文本字段本身中输入内容时，规则就会被执行。我只想在提交时执行规则。如何在 vuetify 文本字段中做到这一点？ Vuetify rules 当输入获取值时执行， 但是，如果您希望仅在表单提交上发生这种情况，则您已经重新修改了绑定到该输入的规则， 最初，规则应该是一个空数组，当您单击按钮时，您可以根据需要动态添加/删除规则，就像在 codepen 中一样 密码笔 <div id="app"> <v-app id="inspire"> <v-form ref="entryForm" @submit.prevent="submitHandler"> <v-container> <v-row> <v-col cols="12" md="6" > <v-text-field v-model="user.number" :rules="numberRules" label="Number" required ></v-text-field> </v-col> </v-row> <v-row> <v-btn type="submit" color="success">Submit</v-btn> </v-row> </v-container> </v-form> </v-app> </div> new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ valid: false, firstname: '', user: { number: '' }, numberRules: [] }), watch: { 'user.number' (val) { this.numberRules = [] } }, methods: { submitHandler () { this.numberRules = [ v => !!v || 'Field is required', v => /^\d+$/.test(v) || 'Must be a number', ] let self = this setTimeout(function () { if (self.$refs.entryForm.validate()){ //other codes alert('submitted') } }) } } }) 如果您像我一样，只是想阻止在每次击键时运行验证，请在文本字段上应用 validate-on-blur 属性，现在只有在用户完成输入整个输入后才会执行验证。 所以这不是OP的确切答案，但我认为这是我们大多数人想要实现的目标。该道具已记录在here。 2024 年更新 Vuetify 3 引入了 validate-on 属性，该属性接受包括 blur 在内的多个值，因此 Vuetify 3 用户的正确语法是 validate-on="blur"。谢谢@epeleg。 我有另一种方法可以在不设置观察者的情况下解决这个问题： <v-form lazy-validation v-model="valid" ref="form"> <v-text-field class="w-100" light label="Nome" v-model="form.nome" :rules="[rules.required]" rounded required outlined hide-details="auto" ></v-text-field> <v-btn rounded height="50" width="200" :disabled="!valid" :loading="isLoading" class="bg-btn-secondary-gradient text-h6 white--text" @click="submitContactForm()" > Enviar </v-btn> </v-form> vuetify 上有一个名为“lazy-validation”的道具，您可以在文档中看到：https://vuetifyjs.com/en/api/v-form/#functions 因此，v-form 有一个可以通过 $refs 查看的方法，称为 validate()，它可以根据您的表单规则返回 true 或 false。 并且，在提交时触发验证的函数将如下所示： submitContactForm() { const isValid = this.$refs.form.validate(); if (isValid) { alert("Obrigado pelo contato, sua mensagem foi enviada com sucesso!"); this.form = { nome: "", celular: "", email: "", mensagem: "" }; this.$refs.form.resetValidation(); // Note that v-form also has another function called resetValidation(), so after we empty our fields, it won't show the validation errors again. } },

在 php laravel-mix 上使用 h() 和子级渲染时传递 props

我有一个 vuejs 组件的案例，需要使用 php 和 laravel-mix 进行渲染。其接受角色道具 导出默认值{ 名称: 'ComponentOne', 道具： { 角色：[编号]， }, 方法：...

RangeError：超出最大调用堆栈大小”同时使用 vuelidate 和 vuetify

我在我的 vue typescript 项目中设置了 vuelidate，如下所示 主要.ts 从“vuelidate”导入 Vuelidate； Vue.use(Vuelidate); Vue.config.生产提示 = false; 新的Vue（{ 路由器， 店铺，

无法在Laravel/Vue docker容器中启动mysql

试图摆脱使用 Sail，并希望在不使用 Sail 的情况下制作我的应用程序。到目前为止我还无法让mysql服务器开始运行。我尝试将 env DB_HOST 更改为 ...

如何在代码中将属性传递给动态 Vue 组件

我正在使用 Vue2 和 TypeScript，我想在代码中将多个属性传递给 Vue 组件。该组件不是通过模板安装的，而是通过代码安装的。我在 DOM 中动态创建一个元素并且

Vue 模板中可以有动态元素名称吗？

我需要一个组件，我可以在其中获取该组件应该创建的另一个组件的类型。 （它可能是 n 个不同元素之一）在组件的渲染函数中执行此操作是 n...

无法访问vue3中的传单mapObject

LTileLayer v-bind="tileLayerOptions" /> 我可以在 vue 2 中很好地访问它，例如 console.log(this.$r...

错误：使用 Vue.js 和 Leaflet 时“超出最大调用堆栈大小”

我正在使用 Vue.js 和 Vue Leaflet。 我的地图和标记组件运行良好，标记坐标每隔几秒就会通过 API 调用更新一次。 我想添加一个功能来遵循特定的