vuejs2 相关问题

VueJS 2.6 中的编程路由和“在新选项卡中打开链接”选项

我有一个按钮，如果我点击它，就会将我带到一个新页面。它看起来像这样并且工作得很好（简化示例）： 去 我可以...

如何在 Vue.js 2.5+ 中使用 Vue-IMask 和 Vuetify

如何在 Vuetify 控件（特别是 v-text-field）上使用 Vue-IMask 指令？它适用于 HTML 输入，但我在 v-text-field 上遇到错误。

当同一页面有多个图片上传字段时，如何处理从剪贴板粘贴图片？

我正在维护一个旧的 vuejs 2 应用程序，由离开公司的其他人完成。这是我们唯一的 vuejs 应用程序，所以没有人那么了解 vue，想知道你是否可以提供帮助。我写了以下内容...

Vue JS - 从日期开始的实时运行时间

目前我的刀片文件上显示了经过的时间。但是要看到更新时间，我需要每次刷新。我想显示动态的经过时间。有办法做到吗？ 我的

splitpanes：实现同步滚动和固定/粘性标题

Sandbox.vue 沙盒.vue <template> <v-container fluid> <Splitpanes class="default-theme" style="height: 400px" > <Pane v-for="i in 2" :key="i" > <div class="pa-4"> <div>Header</div> <div> <!-- very long text... --> </div> </div> </Pane> </Splitpanes> </v-container> </template> <script> import { Splitpanes, Pane } from 'splitpanes' import 'splitpanes/dist/splitpanes.css' export default { components: { Splitpanes, Pane } } </script> <style scoped> .splitpanes__pane { overflow-y: auto; } </style> 我想要同步滚动（左右滚动，就像比较代码时一样）和粘性/固定标题。我怎样才能达到这个结果？ 编辑#1 我通过这种方式实现了同步滚动： <template> <v-container fluid> <v-card class="overflow-y-auto" height="400" outlined flat > <Splitpanes class="default-theme" style="height: auto" > <Pane min-size="1"> <div class="sticky"> Header </div> <div class="pa-4"> <!-- Very long text... --> </div> </Pane> <Pane min-size="1"> <div class="sticky"> Header </div> <div class="pa-4"> <!-- Very long text... --> </div> </Pane> </Splitpanes> </v-card> </v-container> </template> <script> import { Splitpanes, Pane } from 'splitpanes' import 'splitpanes/dist/splitpanes.css' export default { components: { Splitpanes, Pane } } </script> <style> .splitpanes.default-theme .splitpanes__pane { background: transparent; } .default-theme.splitpanes--vertical > .splitpanes__splitter { border-left: none; } .default-theme.splitpanes--vertical > .splitpanes__splitter::before, .default-theme.splitpanes--vertical > .splitpanes__splitter::after { height: 100%; } .sticky { position: -webkit-sticky; position: sticky; top: 0; } </style> 关于固定/粘性标题，我创建了粘性类，但它似乎不起作用。有谁知道如何达到这个结果？ 查看此处可用的项目：https://github.com/vuejs/awesome-vue#scroll 看起来 vue-scroll-sync 就是这么做的。 更新：尝试了一段时间后，我没有让它正常工作...... 这就是我走了多远但没有成功 <template> <div style="display: flex"> <scroll-sync :vertical="true"> <div style="width: 100px; height: 600px; overflow: auto; background: teal" > Nam id faucibus turpis. Sed in ex gravida lorem tincidunt posuere. Cras id velit ac diam pretium cursus. Aliquam sagittis magna non ante vehicula, ac venenatis leo consequat. Fusce blandit, enim sit amet scelerisque lobortis, neque ex cursus velit, sed sodales urna nibh tempor urna. Aliquam erat volutpat. Nam sit amet arcu at mauris fringilla accumsan sit amet ac mi. Mauris consectetur est ligula, eu tristique nibh sollicitudin in. Sed malesuada neque ut ante ultrices malesuada. Curabitur imperdiet neque quis est sodales, id pellentesque nibh eleifend. Maecenas cursus, nibh vitae congue accumsan, nisl lectus pharetra dolor, a ornare diam purus at metus. Vestibulum porta, quam eget venenatis hendrerit, massa tortor faucibus arcu, ac pellentesque felis mi et quam. Etiam sollicitudin pretium diam, at fringilla velit gravida ut. Vestibulum a felis at sapien rutrum fringilla. Donec eu viverra enim. Etiam consectetur elit non nibh ornare blandit. Curabitur ultrices ante quis ipsum efficitur sodales. Sed porttitor lorem vitae ipsum volutpat eleifend. Cras libero nisl, porta sit amet maximus ac, finibus id risus. </div> </scroll-sync> <scroll-sync :vertical="true"> <div style="width: 100px; height: 300px; overflow: auto; background: red"> Nam id faucibus turpis. Sed in ex gravida lorem tincidunt posuere. Cras id velit ac diam pretium cursus. Aliquam sagittis magna non ante vehicula, ac venenatis leo consequat. Fusce blandit, enim sit amet s nibh eleifend. Maecenas cursus, nibh vitae congue accumsan, nisl lectus pharetra dolor, a ornare diam purus at metus. Vestibulum porta, quam eget venenatis hendrerit, massa tortor faucibus arcu, ac pellentesque felis mi et quam. Etiam sollicitudin pretium diam, at fringilla velit gravida ut. Vestibulum a felis at sapien rutrum fringilla. Donec eu viverra enim. Etiam consectetur elit non nibh ornare blandit. Curabitur ultrices ante quis ipsum efficitur sodales. Sed porttitor lorem vitae ipsum volutpat eleifend. Cras libero nisl, porta sit amet maximus ac, finibus id risus. </div> </scroll-sync> </div> </template> <script> export default { components: { [process.client && 'ScrollSync']: () => import('vue-scroll-sync'), }, } </script> 由于维护者没有更多详细信息，我不知道如何更好地联系他。 TLDR：不幸的是，我想有人需要手动实现该功能。

更改<v-autocomplete>芯片删除图标

自动完成.vue 自动完成.vue <template> <v-autocomplete v-bind="$props" v-on="$listeners" > <!-- Cycling through slots --> <template v-for="(_, name) in $slots"> <template :slot="name"> <slot :name="name"></slot> </template> </template> <!-- Cycling through scoped slots --> <template v-for="(_, name) in $scopedSlots" #[name]="data" > <slot :name="name" v-bind="data" ></slot> </template> </v-autocomplete> </template> <script> import { VAutocomplete } from 'vuetify/lib' export default { extends: VAutocomplete, props: { dense: { default: true }, smallChips: { default: true } } } </script> 我想更改垃圾桶图标。 我查看了文档，但没有找到任何可以直接更改图标的道具。我可能是错的，我希望如此，但可能需要访问项目插槽来更改图标。 如果是这样，任何人都可以提供必要的代码来更改图标而不丢失任何特性/功能吗？ 尝试使用clear-icon 属性。 来自文档-

如何使用 Vuetify v-data-table 项槽？

... <!-- DataTable.vue --> <template> <v-data-table class="elevation-1" v-bind="$attrs" v-on="$listeners" dense ></v-data-table> </template> 如您所见，我创建了一个包装 <v-data-table> 的组件。我想知道，为什么如果我使用它，我无法访问项目插槽？ <!-- PeopleView.vue --> <template> <v-container> <DataTable :headers="headers" :items="people" > <template #item.fullName="{ value }"> <b>{{ value }}</b> </template> </DataTable> </v-container> </template> 在 slot 内添加 v-data-table 可能会解决您的问题。 <v-data-table :class="{ clickable }" :headers="reshapedHeaders" :items="items" :loading="loading" :sort-by="sortBy" sort-desc :item-key="itemKey" :expanded.sync="expanded" :show-expand="showExpand" :hide-default-footer="disablePagination" :disable-pagination="disablePagination" @click:row="handleClickRow" @dblclick:row.stop="handleDblclickRow" > <!-- Pass on all named slots --> <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot" /> <!-- Pass on all scoped slots --> <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope" > <slot :name="slot" v-bind="scope" /> </template> </v-data-table> 要使用物品槽，您必须“覆盖”槽和作用域槽。 <!-- DataTable.vue --> <template> <v-data-table ... > <template v-for="(_, name) in $slots"> <template :slot="name"> <slot :name="name"></slot> </template> </template> <template v-for="(_, name) in $scopedSlots" #[name]="data" > <slot :name="name" v-bind="data" ></slot> </template> </v-data-table> </template>

在 vuetify 小吃栏中重置超时

我正在寻找一种在 vuetify 中重置 Snackbar 超时的解决方案。 例如，当登录时收到 api 响应时，我会打开 Snackbar： if (data.status == "成功") { ...

v-on：更改不适用于 vue-multiselect

我在 vue.js 项目中使用 vue-multiselect 组件，我使用 v-on 指令在更改事件上执行函数， 我在 vue.js 项目中使用 vue-multiselect 组件，我使用 v-on 指令在更改事件上执行函数， <multiselect v-model="selected" :options="projects" :searchable="false" :custom-label="customLabel" track-by="name" v-on:change="executeLoader"> <template slot="customLabel" slot-scope="{ customLabel }"><strong>{{ option.name }}</strong></template> </multiselect> 我这里有完整的示例代码：https://codesandbox.io/s/yjjon0vzxj v-on:change 正在与 <select> 组件一起工作，但它停止与 vue-multiselect 一起工作！我尝试过 v-on:click="executeLoader" 但这也不起作用.. @click 不会用 vue multiselect 触发方法 executeLoader。 您可以使用 @input - 类似于 v-on:change、@close、@select，如下例所示： <multiselect placeholder="Pick at least one" select-label="Enter doesn’t work here!" :value="value" :options="options" :multiple="true" :searchable="true" :allow-empty="false" :hide-selected="true" :max-height="150" :max="3" :disabled="isDisabled" :block-keys="['Tab', 'Enter']" @input="onChange" @close="onTouch" @select="onSelect"> </multiselect> 对于你的情况我会尝试@input="executeLoader" 在 vue-multiselect 中，由于它是一个组件，因此您不能将其视为简单的 <select> 元素。 在组件中，当您希望它们像其他 html 标签一样表现并“监听”单击事件时，您应该添加一个名为：.native的事件修饰符。 因此，您可以在任何组件上执行以下操作： <... @click.native="executeLoader" /> 但我认为这不是你正在寻找的。您希望在添加越来越多的标签时触发一个函数，或者简而言之：当所选项目增加时触发一个函数。 为此，vue-multiselect 公开了 @input 事件，因此您可以使用以下方式处理： <... @input="executeLoader" /> 现在只需调用 executeLoader 并接受参数： methods: { executeLoader(selectedItems) {} } 如果您在 2024 年阅读本文，您可能正在使用 Vue 3，所以请尝试 <multiselect ... @update:model-value="apply" />

无法安装我的项目。我从 github 下载 primevue 存储库。当我安装依赖项时，显示错误

我从 github 通过 ZIP 下载 primevue 存储库。当我安装依赖项时，显示错误。当我打开项目并输入“npm i”时，我收到错误 node-sass 并且什么都没有

创建带有可点击指示器的无限滚动轮播

我正在尝试创建一个水平滚动的div，类似于轮播，包含多个可以从左向右滚动的卡片。滚动应该是无限的，这意味着一旦最后......

如何用cypressjs测试quasar组件？

我使用 quasar 来构建我的 web 应用程序，我对使用 CypressJS 测试组件有疑问。 我在我的 web 应用程序上使用 https://quasar.dev/vue-components/select#Example--Generate-multiple-values...

Vuetify v-carousel 与 vuex 异步计算图像无法正常工作

我尝试在 Vuex 中通过 firestore 加载图像，并使用 v-for 循环遍历组件中的计算属性。图像在那里，但幻灯片的第一张图像是空白的。如果我开始狂欢......

Vue.js 中的`async/await`是否可用`mounted`？

我想在 Mounted() {} 中做这样的事情： 等待 fetchData1(); 等待 fetchData2UsingData1(); doSomethingUsingData1And2(); 所以我想知道这是否有效： 异步挂载() { 等待 fetchDat...

如何正确使用Vue JS watch和lodash debounce

我正在使用 lodash 在组件上调用 debounce 函数，如下所示： ... 从'lodash'导入_； 导出默认值{ 店铺， 数据：() => { 返回 { 富：“”， } ...

如何从VueJS中的组件获取数据

我有以下组件： 成分 单一选择器 我有以下组件： 组件 <template> <div> <label class="typo__label">Single selecter</label> <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect> </div> </template> <script> import Multiselect from 'vue-multiselect' export default { components: { Multiselect }, data () { return { value: '', options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched'] } } } </script> 我在我的页面中使用它，如下所示： <p id="app-two"> <dropdown></dropdown> @{{ value }} @{{ message }} </p> <script> new Vue({ el: '#app', data: { message: 'Test message' } }); </script> 当我运行页面时，@{{ message }} 显示“测试消息”，但 @{{ value }} 为空白。 我可以看到下拉组件的值在 VueJS 开发工具中更新，但它没有显示在页面上。如何访问 vue 元素中的组件数据？类似 @{{ dropdown.value }} <template> <div> <label class="typo__label">Single selecter</label> <multiselect v-model="internalValue" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"> </multiselect> </div> </template> <script> import Multiselect from 'vue-multiselect' export default { components: { Multiselect }, props: ['value'], data () { return { internalValue: this.value, options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched'] } }, watch:{ internalValue(v){ this.$emit('input', v); } } } </script> 在您的页面中 <p id="app-two"> <dropdown v-model="selectedValue"></dropdown> @{{ selectedValue}} @{{ message }} </p> <script> new Vue({ el: '#app', data: { selectedValue: null message: 'Test message' } }); </script> 这是一个示例，不使用多选，而是实现对v-model支持的自定义组件。 这对我来说是最好、最干净的方式。 父组件 <template> <ChildComponent v-model="selected" /> </template> 子组件 <template> <Multiselect :value="value" :options="options" :show-labels="false" :multiple="true" :close-on-select="false" :clear-on-select="false" :searchable="false" :limit="1" :limit-text="(count) => $t('app.multiselect.and_n_more', { n: count })" :placeholder="$t('app.select')" label="name" track-by="name" @input="$emit('input', $event)" /> </template> <script> export default { props: { value: { type: Array, default: () => [] } }, data() { return { options: [{id:1, name:'John'}, {id:2, name:'Tom'}] } } } </script>

如何检查vue中是否挂载了子组件？

我想检查子组件是否已安装，并且我想将该信息移动到父组件。为此，我正在使用发射。 因此，这里的示例是我的父组件： 我想检查子组件是否已安装，并且我想将该信息移动到父组件。为此，我正在使用发射。 因此，这里的示例是我的父组件： <child @is-child-mounted="childMounted" /> export default { data() { return { childMounted: false, }; }, mounted() { if (this.childMounted) { //do something } }, } 在子组件中，我将“is-child-mounted”更改为 true： mounted() { this.$emit('isChildMounted', true); }, 但是 if (this.childMounted) 仍然为假。那么如果子组件已挂载，如何检查父组件呢？ 您可以在父组件的子组件上添加监听器。它看起来像这样： Vue3 <Component @vnodeMounted="handleMounted" /> Vue2 <Component @hook:mounted="handleMounted" /> 您可以将钩子名称替换为您想要收听的生命周期名称！我想它应该很少使用，因为它没有出现在文档中，因此是一个内部 API，注定不能直接使用。 来源： https://github.com/vuejs/core/issues/4345#issuecomment-899082892 https://github.com/vuejs/vue/blob/8d3fce029f20a73d5d0b1ff10cbf6fa73c989e62/src/core/instance/lifecycle.js#L348 在触发事件时，子组件中的事件名称似乎有拼写错误，否则代码应该可以正常工作。 应该是is-child-mounted而不是ischildmounted 应该是@is-child-mounted="childMounted = true"而不是@is-child-mounted="childMounted" 现场演示： Vue.component('child', { props: ['childmsg'], template: '<p>{{ childmsg }}</p>', mounted() { this.$emit('is-child-mounted') } }); var app = new Vue({ el: '#app', data: { childMounted: false }, mounted() { if (this.childMounted) { console.log('child mounted'); } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <child childmsg="This is a child component" @is-child-mounted="childMounted = true"></child> </div> Vue3 现在你需要使用 @vue:mounted 代替（@hook:mounted 之前）。 例如 <template> <child @vue:mounted="childMounted()"/> </template> 请参阅 Vue 3 迁移指南 - VNode 生命周期事件了解详细信息 另外，请记住，一些事件名称如 destroyed 和 beforeDestroy 在 Vue3 中已分别重命名为 unmounted 和 beforeUnmount

Vite如何使用sass

Vue.config.js 当我安装 sass 和 sass-loader 时，如何配置以使用 sass 现在我使用 sass 提示错误 Cannot find module 'sass' from 'D:\demo ite'

更改 v-data-table 标题的颜色

我想更改 v-data-table 中标题的颜色，但在 Vuetify 文档中没有找到任何方法。有谁知道该怎么做？ 我可以改变桌子上其余的颜色......

如何在Nuxt中高效加载谷歌字体

我正在使用这个谷歌字体 font-family: 'Saira Semi Condensed', sans-serif; 链接：https://fonts.google.com/specimen/Saira+Semi+Condensed 我正在从事 NuxtJS 项目。我必须使用这个fon...