vuejs2 相关问题

将此标记用于特定于Vue.js版本2的问题，这是一个用于构建用户界面的开源，渐进式Javascript框架。

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

vue.js vuejs2 vuetify.js

回答 1 投票 0

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

...  <template> <v-data-table class="elevation-1" v-bind="$attrs" v-on="$listeners" dense ></v-data-table> </template> 如您所见，我创建了一个包装 <v-data-table> 的组件。我想知道，为什么如果我使用它，我无法访问项目插槽？  <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" >  <slot v-for="slot in Object.keys($slots)" :name="slot" :slot="slot" />  <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope" > <slot :name="slot" v-bind="scope" /> </template> </v-data-table> 要使用物品槽，您必须“覆盖”槽和作用域槽。  <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>

vue.js vuejs2 vuetify.js vuetify-datatable

回答 2 投票 0

在 vuetify 小吃栏中重置超时

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

javascript vuejs2 vuetify.js vuex

回答 1 投票 0

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" />

vue.js vuejs2 vue-component vue-events

回答 3 投票 0

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

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

node.js vue.js vuejs2 npm-install node-sass

回答 1 投票 0

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

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

javascript vue.js vuejs2 carousel infinite-scroll

回答 1 投票 0

如何用cypressjs测试quasar组件？

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

javascript vuejs2 cypress quasar-framework

回答 3 投票 0

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

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

vue.js vuejs2 google-cloud-firestore vuex vuetify.js

回答 4 投票 0

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

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

vue.js vuejs2 async-await

回答 4 投票 0

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

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

javascript vue.js vuejs2 lodash vuex

回答 5 投票 0

如何从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>

vuejs2 components

回答 2 投票 0

如何检查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

vue.js vuejs2 vue-component vuejs3 emit

回答 3 投票 0

Vite如何使用sass

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

vue.js sass vuejs2

回答 5 投票 0

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

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

vue.js vuejs2 vuetify.js

回答 3 投票 0

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

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