vue.js 相关问题

Vue 3 数据表插件如何添加操作按钮？

我在这个项目中使用vue3和laravel惯性。如何在最后一列添加自定义操作按钮？目前我尝试这样做，但handleUser()函数没有工作或触发，我...

vuejs - 如果已经登录，则从登录/注册重定向到主页，如果在 vue-router 中未登录，则从其他页面重定向到登录

如果用户已登录并想要访问登录/注册页面，我想将用户重定向到主页；如果未登录并想要访问其他页面，我想将用户重定向到登录页面。某些页面被排除在外...

Primevue 工具提示指令 CSP 问题

我正在使用 Primevue v3.51.0。我需要过渡到 CSP，但 Primevue 的工具提示仍然存在问题。它报告内联样式。 我已将以下配置添加到我的 Vue 应用程序中： ... 常量

Vuetifyjs v-text-field 在单击附加图标时阻止焦点

我想为追加图标（多图标）创建一个模板。 当我单击该图标时，它将聚焦在输入字段上。 如何预防呢？ [1]：https://codepen.io/tructubinh/pen/ExoyMrv?editors...

如何在 vee validate 4 中对无效或有效数据应用红色背景或绿色背景

我有一个问题。我有这个表单，当未触摸表单字段时，我不希望显示任何错误或颜色，但是当我触摸其中一个字段或更改字段时，我想要绿色或红色......

nuxt 3 中的自定义插件类型未知

在我的nuxt 3应用程序中，我在plugins/文件夹中创建了一个插件。 // 插件/customPlugin.ts 导出默认的defineNuxtPlugin(() => ({ 提供： { 你好：（消息：字符串）=>控制台....

VuetifyJS 垂直按钮文本

我想在 v-btn 中的图标下方添加文本，但似乎找不到如何执行此操作。这怎么可能？

Vue.js 使用特定索引值处的数据更新 html

我只是混合使用 vue.js 和 vanilla 来尝试创建一个二十一点游戏。我将所有卡片数据存储在 vue data() 中，例如： 数据（）{ 返回 { 卡牌：[ {id: 1, 卡名: '...

价格输入格式化程序

我正在尝试编写价格输入的代码。任务应该很简单，但是有些东西不起作用.. 我有一个 Vue 项目，我需要用户在输入字段中输入价格，价格应该是

防止将数据 URI 缓存为图像源？

我有一个img标签并使用数据图像base64 URI作为源。当然，浏览器会缓存这个源。我不想缓存。如果它是一个普通的 URL，我会添加一个随机查询参数 va...

如何让前置标签的宽度减小？

如何让前置标签的宽度减小？当浏览器窗口缩小时，pre 标记可防止 q-card 减小。我想要一张 q 卡，其中包含类似于 ChatG 中的代码...

Vue.js 2：可以使用带有“v-for”的多个“模板”吗？

对于客户项目，我需要使用 Vue.js 版本 2。 在组件中，我对一些使用 和 v-for 的字段定义 JSON 进行了 2 次迭代。 无论我放置哪一个迭代...... 对于客户项目，我需要使用 Vue.js 版本 2。 在组件中，我对一些使用 <template> 和 v-for 的字段定义 JSON 进行了 2 次迭代。 无论我首先放置哪一个迭代，都将被忽略 - 内容永远不会显示。如果我改变他们的顺序，它将是相应的另一个。 大量编辑：现在包括一个可重现的示例，希望 src/__tests__/ConcreteFormComponentFillingSlots.spec.js // @vitest-environment jsdom import { describe, expect, it } from 'vitest' import { mount } from '@vue/test-utils' import ConcreteFormComponentFillingSlots from '@/__tests__/ConcreteFormComponentFillingSlots.vue' describe('My bug with multiple template v-for iterations', () => { it('renders all form fields', () => { const wrapper = mount(ConcreteFormComponentFillingSlots) const renderedHtml = wrapper.html() console.log(`\n\n### + ${renderedHtml}\n\n####`) expect(renderedHtml).includes('Search | Key: |searchResultSlot1|') expect(renderedHtml).includes('Search | Key: |searchResultSlot2|') expect(renderedHtml).includes('Upload | Key: |uploadResultSlot1|') expect(renderedHtml).includes('Upload | Key: |uploadResultSlot2|') }) }) src/__tests__/GenericFormComponentWithSlots.vue <script> export default { name: 'GenericFormComponentWithSlots', props: { id: String, formConfig: Object }, data () { return { pageSelectionIndex: 0, sectionSelectionIndex: 0 } }, methods: { getFieldLabel (field) { return field.label } }, computed: { getSelectedSection () { return this.formConfig.sections[this.sectionSelectionIndex] } } } </script> <template> <div v-bind:id="`c_smart-form-body_some_id`" class="c_smart-form-body"> <transition-group name="show" tag="div"> <template v-for="(field) in getSelectedSection.fields"> <div v-bind:key="`${field.id}_${pageSelectionIndex}_outerForm`" class="c_smart-form-field"> <div v-if="field.type === 'Slot'"> <p v-html="'Slot goes here: field(' + field.id + ')'"/> <slot v-bind:name="`field(${field.id})`" v-bind:field="field"> </slot> </div> <div v-else> <p v-html="'Unknown field type: ' + field.type + ' for field ' + field.id"/> </div> </div> </template> </transition-group> </div> </template> <style lang="less"> </style> src/__tests__/ConcreteFormComponentFillingSlots.vue <script> import GenericFormComponentWithSlots from '@/__tests__/GenericFormComponentWithSlots.vue' import theUserForm from '@/__tests__/the-user-form.json' import _ from 'lodash' export default { name: 'ConcreteFormComponentFillingSlots', mixins: [ ], components: { GenericFormComponentWithSlots }, props: { }, data () { return { customForm: _.cloneDeep(theUserForm), uploadFieldConfigs: { uploadResultSlot1: { isUploading: false, slotName: 'field(uploadResultSlot1)' }, uploadResultSlot2: { isUploading: false, slotName: 'field(uploadResultSlot2)' } }, searchFieldConfigs: { searchResultSlot1: { slotName: 'field(searchResultSlot1)' }, searchResultSlot2: { slotName: 'field(searchResultSlot2)' } } } } } </script> <template> <div class="custom-task-content-container"> <GenericFormComponentWithSlots v-if="customForm" id="customForm" v-bind:form-config=this.customForm > <!-- Iterates over uploadFieldConfigs; fieldConfig will be the child object, key will be the key under which it is stored as part of uploadFieldConfigs --> <!-- '#' is a shorthand for v-slot: (referencing the slot name dynamically is easier with the shorthand) https://vuejs.org/guide/components/slots.html#dynamic-slot-names --> <!-- '=data' passes in the field data, and we pass name and field in EssentialSmartForm, cf. https://vuejs.org/api/built-in-directives.html#v-slot --> <template v-for="(fieldConfig, key) in uploadFieldConfigs" #[fieldConfig.slotName]="data"> <p :key="key + '_upload_debug1'" v-html="'Upload | Key: |' + key + '| Data: |' + JSON.stringify(data) + '|'"></p> </template> <template v-for="(fieldConfig, key) in searchFieldConfigs" #[fieldConfig.slotName]="slotProps"> <p :key="key + '_upload_debug2'" v-html="'Search | Key: |' + key + '| Data: |' + JSON.stringify(slotProps) + '|'"></p> </template> </GenericFormComponentWithSlots> </div> </template> <style lang="less" scoped> </style> src/__tests__/the-user-form.json { "id": "myForm", "version": 1, "headline": "My form", "sections": [ { "id": "BaseInfo", "title": "Some Hints", "allowMultiple": false, "fields": [ { "id": "searchResultSlot1", "type": "Slot", "label": "Search result slot 1", "keyLabel": "labelName", "isReadOnly": false }, { "id": "searchResultSlot2", "type": "Slot", "label": "Search result slot 2", "keyLabel": "labelName", "isReadOnly": false }, { "id": "uploadResultSlot1", "type": "Slot", "label": "Upload Result Slot 1", "upload": true, "required": true }, { "id": "uploadResultSlot2", "type": "Slot", "label": "Upload Result Slot 2", "upload": true, "required": true } ], "defaultValues": { }, "pages": [{}] } ] } vite.config.js import vue from '@vitejs/plugin-vue2' import { fileURLToPath, URL } from "node:url"; export default { plugins: [ vue() ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } } package.json { "name": "My-App", "version": "1.0.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", "test:unit": "vitest --environment jsdom --root src/", "coverage": "vitest --coverage --environment jsdom --root src/" }, "dependencies": { "isomorphic-fetch": "^3.0.0", "register-service-worker": "^1.7.2", "vue": "^2.7.16", "vue-dompurify-html": "4.1", "vue-router": "^3.5.3" }, "devDependencies": { "@vitejs/plugin-vue2": "^2.3.1", "@vitest/coverage-c8": "^0.29.2", "@vue/cli-plugin-eslint": "^5.0.8", "@vue/cli-plugin-pwa": "^5.0.4", "@vue/cli-plugin-router": "^5.0.4", "@vue/cli-service": "^5.0.8", "@vue/eslint-config-standard": "^6.1.0", "@vue/test-utils": "^1.3.6", "axios": "^1.6.5", "eslint": "^7.32.0", "eslint-plugin-import": "^2.26.0", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^5.2.0", "eslint-plugin-vue": "^7.20.0", "jsdom": "^20.0.3", "keycloak-js": "^23.0.7", "less": "^4.1.2", "less-loader": "^10.2.0", "lodash": "^4.17.21", "msw": "^1.1.0", "portal-vue": "^2.1.7", "terser": "^5.30.4", "vitest": "^0.29.8", "vue-axios": "^3.4.1", "vue-i18n": "^8.27.1", "vue-sweetalert2": "^5.0.5", "vue-template-compiler": "^2.7.16", "vue-virtual-scroller": "^1.0.10", "workbox-webpack-plugin": "6.5.3" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "@vue/standard" ], "parserOptions": { "ecmaVersion": 2021 }, "rules": { "indent": [ "error", 4 ] } }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] } 编辑：如果我在填充槽的同一组件中生成槽，问题仍然存在。如果我只有两次迭代并且不使用任何插槽，它就会消失。 这似乎是一个很奇怪的错误，这似乎是由两个 fieldConfig 的迭代器 v-for 的同名引起的。在我看来，无论出于何种原因，变量都是共享的。最简单的解决方法是为每个 v-for 循环使用不同的迭代器变量名称，例如： <template v-for="(fieldConfig, key) in uploadFieldConfigs" #[fieldConfig.slotName]="data"> <p :key="key + '_upload_debug1'" v-html="'Upload | Key: |' + key + '| Data: |' + JSON.stringify(data) + '|'"></p> </template> <template v-for="(fieldConfig2, key) in searchFieldConfigs" #[fieldConfig2.slotName]="slotProps"> <p :key="key + '_upload_debug2'" v-html="'Search | Key: |' + key + '| Data: |' + JSON.stringify(slotProps) + '|'"></p> </template> 注意我如何使用 fieldConfig2 作为 searchFieldConfigs 上的迭代器。

如何在 vue-i18n 中显示带小数和不带小数的货币

通过以下配置，我可以输出带有货币的金额 const numberFormats = { “en-GB”：{ 货币： { 样式：'货币'，货币：'GBP' } }, ...

生产：main@HEAD 失败在“安装依赖项”阶段失败：dependency_installation 脚本返回非零退出代码：1

当我第一次尝试在 Netlify 上发布我的网站时，我收到这些错误 7:24:28 PM：构建映像版本：3d3c7e8b4321e2c1a54a2c4584fb46ba742b1630（焦点） 7:24:28 PM：buildbot 版本：

在生产环境中为 Nuxt.js 3.9 实现 SSL

我正在开发一个项目，其中包括使用 Vue.js/Nuxt.js 开发的前端和由 Java Spring 提供支持的后端。为了部署，我将这两个组件容器化到一个 Docker 映像中，...

添加到地图后如何获取标记详细信息？

我在一个正在实现传单的 vue 项目中使用这个库。 当用户在图书馆找到所需位置后选择地址时，我需要获取添加的标记。我已经...

Vue：获取无功值的不同方式

我对这么多不同的获得无功价值的方式有点困惑。 prop.value、unref(prop) 和 toValue(prop) 之间有什么区别？ 我什么时候应该使用哪种方法？

Watcher 无法检测对象数组发生的更改

我正在使用带有选项 api 的 vue3，如标题为代码的部分所示。我将一个对象设置为商店。 storeTest.vue 显示了 Store 的实现方式，并在 watch 中显示了我如何监听更改

如何更改或覆盖特定的 PrimeVue 组件类？

我正在使用 Tailwind PrimeVue ProgressBar UI 组件。 我想根据进度条的值动态更改条形颜色。 所以我创建了一个方法来获取值并返回

Vue 错误：需要布尔值，但收到 True/False 字符串

我尝试仅在值为 true 时渲染组件，但是我收到以下错误： Vue warn]：无效的道具：道具“可选择”的类型检查失败。预期布尔值...