vuejs2 相关问题

我有使用 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.js vuejs2 vuejs3 element-ui element-plus

回答 1 投票 0

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

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

vue.js vuejs2 vue-router

回答 1 投票 0

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

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

javascript vue.js vuejs2

回答 1 投票 0

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

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

vue.js vuejs2 vuejs3 vuex

回答 1 投票 0

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

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

javascript vue.js vuejs2 vee-validate

回答 1 投票 0

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

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

vue.js vuejs2 nuxt.js vue-router

回答 2 投票 0

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

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

typescript express vuejs2 puppeteer puppeteer-cluster

回答 1 投票 0

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> 为了方便的将几个槽位往下平移，可以使用这个链接描述的方法，稍微修改一下，也许就能往更深的方向移动。

javascript vue.js components vuejs2 vue-component

回答 5 投票 0

传单：_childCount 不等于 _markers.length

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

javascript vue.js vuejs2 leaflet leaflet.markercluster

回答 1 投票 0

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

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

vue.js vuejs2

回答 1 投票 0

vuejs2 相关问题

最新问题