vuejs2 相关问题

如何在使用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 上的迭代器。

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

通过以下配置，我可以输出带有货币的金额 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 多级下拉菜单

我正在尝试创建一个多级下拉菜单，但它对我不起作用，不知道为什么。我的控制台上没有错误。我正在使用 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，以获得正确的下拉功能。

如何计算数组子级的深度 - Vue.js

我希望计算深度方法能够正确计算深度，而是反向计算，将第一个元素分配为深度 2，第二个元素分配为深度 1，第三个元素分配为

RouterView在vue项目中无法运行

我正在开发一个 vue 项目。我有一个主页，上面有一个 sideBar 组件和一个 routerView 组件。 看起来像这样 单击侧边栏的任何项目时，路由器会推送到

如何更新 vue.js 中的多选？

&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>

如何在 vue.js 中更新多选或日期等数据？

我是 vue.js 的新手。我写这个是为了编辑数据 我是 vue.js 新手。我写这个是为了编辑数据 <i class="mdi mdi-pencil" @click.prevent="$bvModal.show(`Rel${holiday.id}`)" ></i> <b-modal :id="`Rel${holiday.id}`" ref="modal" title="Update holiday" centered hide-footer> <EditModal cardTitle="Update holiday" description="Update holiday" :holidayObject="holiday"/> </b-modal> 我在文件 edit-modal.vue 中写入模态，并为表单编写此内容： <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="holidayComments" :value="holidayObject.comments" /> </div> <div class="mb-3"> <label class="mt-3">Holiday type*</label> <multiselect required id="validationCustom02" v-model="holidayTypeValue" :options="holidayTypesOptions" placeholder="choose type" selectLabel="type choised" selectedLabel="choosed" deselectLabel="by choice" :value="holidayObject.holiday_type_name" ></multiselect> </div> </div> <div class="col-md-12"> <div class="row"> <div class="col-md-12"> <div class="mb-3"> <label class="mt-3">From*</label> <b-form-input id="validationCustom03" v-model="startDate" type="date" placeholder="DD-MM-YYYY" format="DD-MM-YYYY" autocomplete="off" :value="holidayObject.holidays_start_date" ></b-form-input> </div> </div> <div class="col-md-12"> <div class="mb-3"> <label class="mt-3">To*</label> <b-form-input id="validationCustom04" v-model="endDate" type="date" placeholder="DD-MM-YYYY" format="DD-MM-YYYY" autocomplete="off" :value="holidayObject.holidays_end_date" ></b-form-input> </div> </div> </div> </div> </div> <button class="btn btn-primary" type="submit"> Submit </button> </form> 我写了这个ins脚本 import session from "../../../../api/session"; import Multiselect from "vue-multiselect"; import { eventCreate } from "../../../../eventspy"; export default { components: { Multiselect, }, props: { cardTitle: String, description: String, holidayObject: { type: Object, required: true, } }, data() { return { 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.holidayTypes.map((e) => e.title); }, }, methods: { fetchHolidayTypes() { session.get("api/holidays/holiday-type-list/").then((resp) => { this.holidayTypes = resp.data; }); }, async UpdateFormSubmit(holidayID) { if (!this.holidayTypeValue) { alert('Input the holiday type.'); return; } if (!this.startDate || !this.endDate) { alert('Input the dates'); return; } if (this.startDate > this.endDate) { alert('end date should be after start date'); return; } // this.$refs["modal"][0].hide(); const holidayTypesId = this.holidayTypes .filter((e) => e.title === this.holidayTypeValue) .map((item) => item.id)[0]; console.log("holiday type id",holidayTypesId) await session .put(`api/person/holiday/${holidayID}/actions/`, { holidays_start_date: this.startDate, holidays_end_date: this.endDate, comments: this.holidayComments, person: this.$route.params.id, holiday_type_name: this.holidayTypeValue }) .then(() => { this.alertShow = !this.alertShow; this.alertVariant = 'success'; this.alertMsg = 'data updated'; setTimeout(() => { this.$bvModal.hide(`Rel${holidayID}`); }, 1500); eventCreate(`comments: ${this.holidayObject.comments}, holiday_type_name: ${this.holidayObject.holiday_type_name}, holiday_start_date: ${this.holidayObject.holidays_start_date}, holiday_end_date: ${this.holidayObject.holidays_end_date}, ------------------------------------------ comments: ${this.holidayComments}, holiday_type_name: ${this.holidayTypeValue}, holiday_start_date: ${this.startDate}, holiday_end_date: ${this.endDate}`,2); }) .catch((e) => { this.alertShow = !this.alertShow; this.alertVariant = 'danger'; this.alertMsg = e.response.data; }); }, } } 我的问题是，当我更改假期类型时，假期类型不会更改，而当我更改日期时，日期仅在刷新页面后才更改。这有什么问题吗？ 我设法在 editModal 中使用此更新数据而无需刷新页面 setTimeout(() => { this.$bvModal.hide(`Rel${holidayID}`); this.$emit("holidayUpdated"); }, 1500); 还有这个 holidayUpdated(holidayID){ this.$bvModal.hide(`Rel${holidayID}`); this.fetchPersonHolidays(); } 但我也有多选更新的问题

如何将 ref 传递给 props？

我有一个应该传递给 props 的 ref，但是当我这样做时，ref 在子组件中未定义 父级.vue 目标 我有一个应该传递给 props 的 ref ，但是当我这样做时 ref 在子组件中未定义 parent.vue <div ref="target">target</div> <cmp :target="$refs.target" /> cmp.vue mounted() { console.log("target:", this.target); // undefined } 示例：codesanbox 热模块更换后目标正确 我不确定是否将其作为道具传递，但您始终可以在子组件中执行此操作。 console.log(this.$parent.$refs.target); 更多信息请参见文档。 这是另一种做事方式（确实更干净）。 App.vue <template> <div id="app"> <div ref="target">target</div> <cmp :getScreenRef="() => $refs['target']" /> </div> </template> <script> import Cmp from "./components/cmp.vue"; export default { name: "App", components: { Cmp, }, }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> cmp.vue <template> <div> qwe <br /> <button @click="logTarget">click me</button> </div> </template> <script> export default { inheritAttrs: true, data() { return { screenRef: "", }; }, props: { getScreenRef: { type: Function, default: () => ({}), }, }, methods: { logTarget() { console.log("target:", this.screenRef); }, }, mounted() { this.screenRef = this.getScreenRef(); this.$nextTick(function () { console.log("here?", this.screenRef); }); }, }; </script> 归功于这个答案。

Vuetify 2 v 菜单左侧 | （Vuetivy 3 替补）

我正在尝试制作一个 Vue&Vuetify 应用程序，并且我一直在寻找一种方法使我的菜单下拉菜单位于左侧 标题下拉中心居中对齐 在 vuetify 3.0 中我们可以使用“位置”，但是这个

正确使用 click:outside 和 vuetify 对话框

我有一个 v 对话框，可以在需要时弹出日期选择器。为了展示它，我将一个值与 v-model 绑定。我使用 click:outside 事件来触发应该关闭它的函数，一旦我...

有没有办法将组件（同时设置其属性）v-bind 作为另一个组件的属性，如下所示

这就是我想要实现的目标。我想提供 MyParentComponent 一个子组件作为项目...

Vue js 2 如何通过替换当前数组 prop 将过滤后的数组从父组件返回到子组件

我正在使用 Vuejs 2。我有一个子组件，我从中发出一个事件， 子代码 this.$emit("remove-blocked-user-posts",BlockedUserName); 在父级中，我有后数组道具...

如何使用导航选项卡设置活动类别

我使用 Bootstrap 3 导航选项卡组件作为我的主导航栏，但我不知道如何基于类绑定设置活动菜单。 在任何按钮内部显示下拉导航/

路由器链接到带有参数的路径

我正在尝试使用 vue-router 转到我的 vue 应用程序中的 UserDetail 路径。 我的路线是： 常量路由 = [ { 路径: '/users', 组件: UserList }, { 路径：'/users/:user_id'，组件：UserDetai...

如何在三个不同的div元素上设置ref，然后访问这些元素的数组？

我想要访问三个 div 元素。我在所有三个 div 上设置了相同的“ref”值，但是当尝试在 Vue 中检索这些元素时，“elements”变量为空。我期待什么

如何在Vue2项目中使用Vue3组件？

我有一个Vue2+JS项目，想添加一个聊天组件，但是我发现了一些使用Vue3+ts编写的开源项目。我的Proje中应该如何使用Vue3开发的组件...

Vuex 与 TypeScript 映射函数

我的状态（游戏命名空间）有一个接口，如下所示： 接口游戏状态{ 选定的选项卡：数字； 超时：数量； 小吃栏：布尔值； 文本：字符串； 完成任务：nu...