将此标记用于特定于Vue.js版本2的问题，这是一个用于构建用户界面的开源，渐进式Javascript框架。
我正在使用 vue-js-modal 库并遵循文档中的相同步骤，但我需要实现当模式打开时用户在单击背景时无法关闭模式
我正在使用Vue2和Vue-router（版本^2.2.0）开发一个应用程序，后退和前进导航按钮必须显示用户是否可以后退/前进。 检查用户是否可以...
请有人教我点击时交换两个不同数据的方法 例如我们有一个数据 数据（） { 返回 { 数据一：[ { 名称：“西莫&...
如何通过 typescript 在 Vue2 中使用带有组合 api 的 vue 类组件
从 'vue-property-decorator' 导入 { Component, Vue } 从 '@/composables/customerRepository' 导入 { CustomerContext, getCustomerRepository } @成分 出口</desc> <question vote="7"> <pre><code><script lang="ts"> import { Component, Vue } from 'vue-property-decorator' import { CustomerContext, getCustomerRepository } from '@/composables/customerRepository' @Component export default class CustomerList extends Vue { search = '' setup(): CustomerContext { const ctx = getCustomerRepository() return ctx } } </script> </code></pre> <p>在 Vue 2 中，我想通过 TypeScript 将 Composition API 与类组件样式一起使用，但我不确定语法是否正确。此外，<pre><code>setup()</code></pre>函数不会自动调用。</p> <p><pre><code>vue-class-component</code></pre>可以在 TypeScript 中使用 Compostion API 吗？</p> </question> <answer tick="true" vote="21"> <h3>Vue 2</h3> <p>首先，确保您已经安装了 Vue 2 的 <a href="https://www.npmjs.com/package/@vue/composition-api" rel="noreferrer"><pre><code>@vue/composition-api</code></pre></a> 插件：</p> <pre><code>// main.ts import Vue from 'vue' import VueCompositionApi from '@vue/composition-api' Vue.use(VueCompositionApi) </code></pre> <p>然后将 <pre><code>setup()</code></pre> 定义为 <pre><code>@Component</code></pre> 选项（而不是类方法）：</p> <pre><code>// MyComponent.vue @Component({ setup(props, context) { //... } }) export default class CustomerList extends Vue { //... } </code></pre> <h3>Vue 3</h3> <p>对于 Vue 3，<pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="a4d2d1c189c7c8c5d7d789c7cbc9d4cbcac1cad0e49c8adc">[email protected]</a></code></pre> 导出一个 <pre><code>setup()</code></pre> API，您可以将其分配给局部变量：</p> <pre><code><template> <div>counter: {{myContext.counter}}</div> <button @click="myContext.increment">Increment</button> </template> <script lang="ts"> import { Vue, setup } from 'vue-class-component' import { ref } from 'vue' export default class MyComponent extends Vue { myContext = setup(() => { const counter = ref(0) return { counter, increment() { counter.value++ } } }) } </script> </code></pre> <p><em><strong>注意：</strong> 从 <pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="f1878494dc929d908282dc929e9c819e9f949f85b1c9dfc1dfc1dc8392dfc0">[email protected]</a></code></pre> 开始，<pre><code>setup()</code></pre> 不接收任何参数，包括来自选项 API<a href="https://v3.vuejs.org/guide/composition-api-setup.html#arguments" rel="noreferrer"> 中使用的 <pre><code>context</code></pre> 的 <pre></pre><code>props</code><pre> 和 </pre><code>setup()</code></a> 参数。</em></p> </answer> <answer tick="false" vote="0"> <p>使用class来编写setup，支持vue2和vue3</p> <pre><code><template> <p>{{ count.text }}</p> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { Setup, Hook } from 'vue-class-setup'; @Setup class Count { public value = 0; public get text() { return String(this.value); } @Hook('mounted') public init() { this.value++; } } export default defineComponent({ setup() { return { count: new Count() } } }) </script> </code></pre> <p><a href="https://github.com/fmfe/vue-class-setup" rel="nofollow noreferrer">https://github.com/fmfe/vue-class-setup</a></p> </answer> <answer tick="false" vote="0"> <pre><code>import ClassComponent from 'vue-class-component' ClassComponent.registerHooks(['setup']) </code></pre> <p>将其放在项目的开头，然后一切都会按您的预期进行</p> </answer> </body></html>
Element UI 日期时间选择器禁用当前时间之前的小时和分钟
我使用的是element-ui 2.15.7。如何禁用当前时间之前的小时和分钟。例如，当前时间是 27/11/2023 1:41 pm，所以我希望日期选择器禁用 0 -> 12 小时（仅 sh...
我刚刚开始学习 vuejs，我尝试运行一些代码来应用我所学到的知识，通过使用 Vue.component('nameOfComponent', { }); 在 vue 实例中创建一个基本组件，还
如何在vue生命周期钩子中使用vuex使用async/await？
当我在 Mounted() 生命周期挂钩中的 App.vue 组件中分派一个操作时，它会在其他组件加载后运行。我在操作中使用 async/await 并安装了生命周期挂钩。 应用程序.vue 文件 方法...
在Vue.JS中，如何将props值传递和更改到嵌套组件中？
我的要求非常基本且简单，但不知道为什么 ChatGPT 一直给我带有警告消息的答案。 我正在使用 Vue 2。 我有三个嵌套组件：GrandParentComponent，
如基本选项文档中所述（适用于 v3）： 应用程序的基本 URL。例如，如果整个单页应用程序在 /app/ 下提供服务，则 base 应使用值“/...
数据（）{ 返回 { 订单数量：空， } }, 方法： { 显示数量（产品 ID）{ this.carts.filter(函数(购物车) { 如果（购物车.产品_...
我的项目直到今天才开始建设。为了清楚起见，我没有改变任何东西。奇怪的是，另一个我几周没有碰过的 NPM 项目也发生了这种情况。 我收到了...
如何在使用create-vue创建的VueJS2项目上添加Vuetify2
我有一个现有的 Vue2 项目，它是使用 create-vue 创建的。 由于该项目位于 vue2 中，为了能够使用 Vuetify，我需要使用 v2。但问题是如何添加呢？在 Vuetify v2 文档中，...
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 上的迭代器。
通过以下配置，我可以输出带有货币的金额 const numberFormats = { “en-GB”：{ 货币： { 样式：'货币'，货币：'GBP' } }, ...
Vue 错误：需要布尔值，但收到 True/False 字符串
我尝试仅在值为 true 时渲染组件，但是我收到以下错误： Vue warn]：无效的道具：道具“可选择”的类型检查失败。预期布尔值...
Wowjs 和 Animate.css 无法与 VUEJS 一起使用
我试图使用 wowjs 或 animate.css 包含一些动画，但它似乎不起作用。 这是我采取的步骤。 第一： npm 安装 wowjs 在 main.js 中 导入“animate.css”； 在页面...
我正在尝试创建一个多级下拉菜单，但它对我不起作用，不知道为什么。我的控制台上没有错误。我正在使用 Vuejs 2.version。 这是我的下拉菜单； 我正在尝试创建一个多级下拉菜单，但它对我不起作用，不知道为什么。我的控制台上没有错误。我正在使用 Vuejs 2.version。 这是我的下拉菜单； <b-dropdown id="benutzer-dropdown" text="Benutzer" class="navbar-item"> <b-dropdown-item href="/main/de/verwaltung/users/">Benutzer verwalten</b-dropdown-item> <b-dropdown-item href="/main/de/verwaltung/roles/">Rollen verwalten</b-dropdown-item> <b-dropdown-item href="/main/de/verwaltung/permissions/">Berechtigungen verwalten</b-dropdown-item> <b-dropdown id="submenu" right> <b-dropdown-item @click="handleSubMenuClick">1</b-dropdown-item> <b-dropdown-item @click="handleSubMenuClick">2</b-dropdown-item> <b-dropdown-item @click="handleSubMenuClick">3</b-dropdown-item> </b-dropdown> </b-dropdown> 和js函数（我只是想测试一下，但是我的控制台里什么也没有） handleSubMenuClick(){ console.log("clicked!!"); }, 看起来您正在尝试使用 b-dropdown 组件在 Vue.js 中实现多级下拉菜单，我认为它是 Bootstrap-Vue 或类似库的一部分。但是，从您的代码片段来看，子菜单下拉列表似乎未正确配置为充当嵌套下拉列表。父下拉列表可以包含嵌套下拉列表，但嵌套下拉列表本身需要正确的设置才能将其内容显示为下拉列表。 以下是如何修改代码以确保嵌套下拉菜单正确运行的方法： 确保正确使用嵌套下拉列表的作用域插槽：在 Bootstrap-Vue 中，如果您使用嵌套下拉列表，通常需要使用作用域插槽来正确渲染嵌套下拉列表及其项目的切换。 如有必要，请使用 b-nav-item-dropdown：如果您位于导航栏上下文中，b-nav-item-dropdown 可能比 b-dropdown 更合适。 确保正确处理点击事件：Vue.js 需要正确定义方法并正确绑定到点击事件。 贝努茨管理 罗伦管理 管理责任 <b-nav-item-dropdown text="Submenu" right> <b-dropdown-item @click="handleSubMenuClick">1</b-dropdown-item> <b-dropdown-item @click="handleSubMenuClick">2</b-dropdown-item> <b-dropdown-item @click="handleSubMenuClick">3</b-dropdown-item> </b-nav-item-dropdown> </b-nav-item-dropdown> 导出默认值{ 方法： { 处理子菜单点击() { console.log("点击了!!"); } } } 主要变化： b-nav-item-dropdown：这用于更好地集成在导航栏中。 嵌套下拉菜单：封装在另一个 b-nav-item-dropdown 中以获得正确的行为。 Vue 方法：确保您的方法在 Vue 实例中正确定义。 最后，如果您正在使用 Bootstrap-Vue，请确保您的 Vue 项目正确导入和配置它。您可能还想检查您的项目设置是否正确包含 Bootstrap CSS 和 JS，以获得正确的下拉功能。
我希望计算深度方法能够正确计算深度，而是反向计算，将第一个元素分配为深度 2，第二个元素分配为深度 1，第三个元素分配为
我正在开发一个 vue 项目。我有一个主页，上面有一个 sideBar 组件和一个 routerView 组件。 看起来像这样 单击侧边栏的任何项目时，路由器会推送到
&l... <form class = "needs-validation" @submit.prevent = "UpdateFormSubmit(holidayObject.id)"> <div class = "row"> <div class = "col-md-6"> <div class = "mb-3"> <label for = "validationCustom01">Comments</label> <b-form-input id = "validationCustom01" type = "text" class = "form-control" placeholder = "Comments" v-model = "holiday.holidayComments" /> </div> <div class = "mb-3"> <label class = "mt-3">Holiday type*</label> <multiselect required id = "validationCustom02" v-model = "holiday.holidayTypeValue" :options = "holidayTypesOptions" placeholder = "select type" selectLabel = "select type" selectedLabel = "selected" deselectLabel = "selected" ></multiselect> </div> </div> <div class = "col-md-12"> <div class = "row"> <div class = "col-md-12"> <div class = "mb-3"> <label class="mt-3">Start date*</label> <b-form-input id = "validationCustom03" v-model = "holiday.startDate" type = "date" placeholder = "DD-MM-YYYY" format = "DD-MM-YYYY" autocomplete = "off" ></b-form-input> </div> </div> <div class = "col-md-12"> <div class = "mb-3"> <label class = "mt-3">End date*</label> <b-form-input id = "validationCustom04" v-model = "holiday.endDate" type = "date" placeholder = "DD-MM-YYYY" format = "DD-MM-YYYY" autocomplete = "off" ></b-form-input> </div> </div> </div> </div> </div> <button class = "btn btn-primary" type="submit"> submit </button> </form> 我用vue.js写了一个项目。我有上面的表格。我的问题是，当我进行更新时，除假期类型之外的所有字段都会更新，我在这方面犯了什么错误？我尝试更改假期类型并对其进行调试，尽管我输入的新假期类型已打印到控制台，但假期类型并未更改。 <script> import session from "../../../../api/session"; import Multiselect from "vue-multiselect"; export default { components: { Multiselect, }, props: { cardTitle: String, description: String, holidayObject: { type: Object, required: true, } }, data() { return { holiday: { startDate: this.holidayObject.holidays_start_date, endDate: this.holidayObject.holidays_end_date, holidayTypes: [], holidayTypeValue: this.holidayObject.holiday_type_name, holidayComments: this.holidayObject.comments, }, alertShow: false, alertVariant: "", alertMsg: "" }; }, mounted() { this.fetchHolidayTypes(); }, computed: { holidayTypesOptions() { return this.holiday.holidayTypes.map((e) => e.title); }, }, methods: { fetchHolidayTypes() { session.get("api/holidays/holiday-type-list/").then((resp) => { this.holiday.holidayTypes = resp.data; }); }, UpdateFormSubmit(holidayID) { console.log("eimai sto edit"); if (!this.holiday.holidayTypeValue) { alert('Παρακαλώ επιλέξτε έναν τύπο άδειας.'); return; } if (!this.holiday.startDate || !this.holiday.endDate) { alert('Παρακαλώ συμπληρώστε ημερομηνίες'); return; } if (this.holiday.startDate > this.holiday.endDate) { alert('Η ημερομηνία λήξης πρέπει να είναι μετά την ημερομηνία έναρξης'); return; } const holidayTypesId = this.holiday.holidayTypes .filter((e) => e.title === this.holiday.holidayTypeValue) .map((item) => item.id)[0]; console.log("holiday type id",holidayTypesId); console.log("holiday value",this.holiday.holidayTypeValue); console.log("start date",this.holiday.startDate); session .put(`api/person/holiday/${holidayID}/actions/`, { holidays_start_date: this.holiday.startDate, holidays_end_date: this.holiday.endDate, comments: this.holiday.holidayComments, person: this.$route.params.id, holiday_type_name: this.holiday.holidayTypeValue }) .then(() => { console.log("holiday value then",this.holiday.holidayTypeValue); console.log("start date",this.holiday.startDate); this.alertShow = !this.alertShow; this.alertVariant = "success"; this.alertMsg = 'Τα δεδομένα ενημερώθηκαν επιτυχώς'; setTimeout(() => { this.$bvModal.hide(`Rel${holidayID}`); this.$emit("holidayUpdated"); }, 1500); }) .catch((e) => { this.alertShow = !this.alertShow; this.alertVariant = "danger"; this.alertMsg = e.response.data; }); }, } } </script>