Vue.js是一个开源的，渐进式的Javascript框架，用于构建旨在逐步采用的用户界面。 Vue.js主要用于前端开发，需要中级HTML和CSS。应该标记特定于Vue.js版本2的问题[vuejs2]。
使用 Axios 和 Laravel Echo 访问 Vue 3 中的属性时出错：无法读取未定义的属性（读取“discussion_id”）
`问题描述： 我正在开发一个聊天应用程序，使用 Vue 3、Axios 和 Laravel Echo（带有 Pusher）进行实时更新。我遇到了一个问题，收到以下错误： ``
我创建了一个使用 Vuetify、Vuex 和 vuedraggable 的 Vue 应用程序。 通过拖放包含相关信息的 v-card，该组件按预期运行，但我还没有...
Vuetify v-select 项目槽仅渲染最多 57 个项目
在集成自定义 v-select 组件时，我发现了以下行为： 常量项= []； 对于（令索引 = 0；索引 < 200; index++) { items.push(index); 在集成自定义 v-select 组件时，我发现了以下行为： const items = []; for (let index = 0; index < 200; index++) { items.push(index); <v-select label="Select" :items="items" /> 按预期渲染“选择”下拉列表中的所有 200 个项目 但是当使用插槽时： const items = []; for (let index = 0; index < 200; index++) { items.push(index); <v-select label="Select" :items="items"> <template v-slot:item="{ item }"> <span>{{ item.title }} </span> </template> </v-select> 它仅渲染前 57 个项目... 这只是针对该问题的一个简单示例。 Vue 版本 3.4.21 Vuetify 版本 3.5.14 我错过了什么吗？ 这是某种性能优化吗？ 非常烦人的是我无法可视化所有条目...... 以下是 vuetify 文档中关于项目槽的内容： 定义自定义项目外观。此槽的根元素必须是应用了 v-bind="props" 的 v-list-item。 props 包括默认选择列表行为所需的所有内容 - 包括标题、值、单击处理程序、虚拟滚动以及添加的任何其他内容 物品道具。 来源：https://vuetifyjs.com/en/api/v-select/#slots-item 我希望下面的代码能够澄清一切。 <template> <v-select label="Select" :items="items"> <template v-slot:item="{ props }"> <v-list-item v-bind="props" /> </template> </v-select> </template> <script setup> const items = [] for (let index = 0; index < 200; index++) { items.push(index) } </script>
我正在尝试使用 Vue 来更新我的静态 HTML。我需要的是更新一些元素（例如，更改内部 HTML、图标或其中的某些部分），并向 DOM 添加一个新元素。我的要求是...
我的商店和状态正在正确更新。我将 Ionic 与 vue.js 组合与 Pinia 结合使用。 当我在之前的路线上进行选择以选择新图像时，图像会在图钉中正确更新...
如何实现v-bottom-sheet对话框的圆角？样式=“边框半径：20px；”使圆形覆盖而不是对话框。 如何实现v-bottom-sheet对话框的圆角？ style="border-radius:20px;" 制作圆形覆盖层而不是对话框。 <v-bottom-sheet style="border-radius:20px;" v-model="sheet" inset> <v-sheet class="text-center"> <h1 style="color:red;">Header</h1> <br> </v-sheet> </v-bottom-sheet> 我希望你是这个意思。 <v-bottom-sheet v-model="sheet" inset> <v-sheet style="border-radius: 20px" class="text-center"> <h1 style="color: red">Header</h1> <br /> </v-sheet> </v-bottom-sheet>
有没有办法在新选项卡中打开惯性链接，就像在锚标记中一样： 这不起作用： 有没有办法在新选项卡中打开inertia link，就像在anchor标签中一样： <a target="_blank" rel="noopener noreferrer"></a> 这行不通： <Link :href="..." target="_blank"> 我不相信这是可能的 - 所以标准锚标签是可行的方法。 这是因为如果要在新选项卡中打开链接，则实际上不需要涉及 Inertia，因为它不必拦截单击并执行自己的服务器请求。 Inertia 开发者在此 github 问题中确认：https://github.com/inertiajs/inertia/issues/1096 这里似乎也有同样的问题 不过那是很久以前的事情了 我不确定您现在使用的是哪个依赖版本 与该问题兼容 但你可以看看这是否对你有帮助 React-Router 在新选项卡中打开链接 尝试以下方法 Javascript： const newTab = (e) => { e.preventDefault(); window.open(route('the_route_you_want')); } 在组件中： <Link onClick="newTab">Open new window</Link>
如何在 vue.js 中使用 v-calendar 触发更改事件
当更改月份/年份更改时，如何监听 v-Calendar 的 onChange ？ 如果我更改日期，V-model 只会给我选定的日期。 当更改月份/年份更改时，如何在 onChange 上收听 v-Calendar？ V-model 如果我更改日期，只会给我选定的日期。 <v-date-picker mode="single" v-model="date" color="red" is-inline /> <div> {{ date }} </div> 当 v-Calendar 组件的值发生变化时，我尝试触发某些操作时遇到了同样的问题，而 @change 没有触发任何内容。 我在组件脚本中使用了watch： <script> export default { data() { return { date: {} } }, watch: { date: function() { // do what you want here } } } </script> 当我需要跟踪月份变化时，我使用了update: fromPage 它对我有用 <DatePicker v-model="date" mode="date" :available-dates="dates" is-expanded title-position="right" @update:fromPage="change" /> const onChange = (e) => { const params = { month: e.month, }; getAvailableDates(params); }; update:picker-date 这对我有用https://v2.vuetifyjs.com/en/api/v-date-picker/#events-update:picker-date <v-date-picker mode="single" v-model="date" @update:picker-date="onMonth" color="red" is-inline /> const onMonth = (month) => { console.log('change month', month); }
如何调整vuetify vuejs点击按钮打开的v-dialog的位置？
我正在尝试在单击“打开对话框”按钮时使用 v-dialog vuetify 创建一个弹出窗口。我希望弹出窗口出现在按钮下方。类似于下图的东西。 这是代码。我试过了...
我希望卡片上有喜欢和不喜欢的百分比。 我希望卡片上有喜欢和不喜欢的百分比。 <v-card v-if="software[2] == searched || searched == ''" class="software-card" > <h3>{{ software[2] }}</h3> <h2>{{ software[3] }}</h2> <p>{{ software[4] }}</p> <v-row> <v-col> <v-btn class="button">Read More</v-btn> </v-col> <v-col> <p> {{ percentage }} </p> </v-col> <v-col> <v-icon class="like" color="green" icon="mdi-thumb-up"></v-icon> <p class="like">{{ software[6] }}</p> </v-col> <v-col ><v-icon class="dislike" color="red" icon="mdi-thumb-down" ></v-icon> <p class="dislike">{{ software[7] }}</p> </v-col> </v-row> </v-card> 我有一个名为 getPercentage 的函数： getPercentage(like, dislike) { this.percentage = like / (like + dislike); }, 我如何调用此函数，以便我可以将软件[6]和软件[7]发送到该函数 - 这是喜欢和不喜欢的计数 - 在 p 标签 只需从模板中调用它即可： getPercentage(like, dislike) { return like / (like + dislike); }, ... <p> {{ getPercentage(software[6], software[7]) }} </p> 如果您在其他地方不使用该功能，您可以直接计算： <p> {{ software[6] / (software[6] + software[7]) }} </p> 但我首先会使用命名属性而不是software[n]
我正在尝试在我的 Vue 项目中实现 SignalR，但遇到问题
我正在使用Vue + ts，我想在我的项目中实现SignalR。我已阅读有关如何使用 SignalR 的 @dreamonkey/vue-signalr 文档。 从“@dreamonkey/vue-signalr”导入{VueSignalR}； ...
Bootstrap js 文件在 vue 3 options api 自定义元素中不起作用
我正在尝试在 Vue 3 Options Api 自定义元素中使用 Bootstrap 5。我在正确加载引导程序时遇到问题。 这是我的 main.ts 文件： 从“vue”导入{defineCustomElement} ...
我正在尝试将现有的 vue/vuetify 项目合并到 Ionic 中。大部分工作正常，但我无法正确渲染任何表单输入 - 它们都垂直显示： <... 我正在尝试将现有的 vue/vuetify 项目合并到 Ionic 中。大部分工作正常，但我无法正确渲染任何表单输入 - 它们都垂直显示： <template> <input type="checkbox" id="checkboxSizes" @change="emit('changeImages')" /> <label for="checkboxSizes">Random sizes</label> .... .... </template> 显示为 在 Ionic 项目中，而不是 应该如此。 对于其他 html 输入以及 Vuetify 输入组件也会发生同样的情况。其他 Vuetify 组件（例如 v-chip）正确显示。 事实证明与 Ionic 无关。在将两个项目合并在一起时，一个组件的部分没有确定作用域，因此影响了它不应该影响的组件。 <style scoped> /* <--- I forgot this 'scoped' */ label { display: inline-block; margin-left: 10px; width: 20px; } line { stroke: darkGreen; stroke-width: 5px; } </style>
如何在 Vue 中根据链接是外部还是内部动态渲染 <router-link> 或 <a>？
<template> <component :is="type === 'internal' ? 'router-link' : 'a'" :to="type === 'internal' ? link : null" :href="type !== 'internal' ? link : null" > <slot /> </component> </template> <script lang="ts"> import { Component, Prop, Vue } from "vue-property-decorator"; @Component export default class SiteLink extends Vue { @Prop({ validator: (value: string) => ["external", "internal"].includes(value) }) private readonly type!: string; @Prop({ type: String }) private readonly link!: string; } </script> 上面是一个 Vue 组件，它将在其中渲染链接。我删除了与问题无关的任何内容（即 rel、target、class 等）。 理解 - 我对 Vue Router 的理解是 <router-link to="/about">About</router-link> 和 <a href="/about">About</a> 都会在 DOM 中呈现为 <a href="/about">About</a> ，不同之处在于 <router-link> 版本将为链接提供 SPA 功能（即不提供 SPA 功能）不加载新页面，它会动态呈现组件）。 预期 - 当type="internal"时，它将渲染<router-link>版本。当 type="external" 时，它将渲染 <a> 版本。 <site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link> Will render <a href="https://stackoverflow.com">Stack Overflow</a> <site-link type="internal" link="/about">About</site-link> Will render <router-link to="/about">About</router-link> Which is then handle by VueRouter to render <a href="/about">About</a> 实际 - 当 type="internal" 时，在 DOM 中呈现带有 no <a> 的 href。当 type="external" 时，它会按预期呈现。 <site-link type="external" link="https://stackoverflow.com">Stack Overflow</site-link> Will render <a href="https://stackoverflow.com">Stack Overflow</a> <site-link type="internal" link="/about">About</site-link> Will render <router-link to="/about">About</router-link> Which is then handle by VueRouter to render <a>About</a> <!-- Notice there is no href --> 有什么想法可以实现我想要的吗？ 更好、更干净的方法： <router-link v-if="type === 'internal' :to="link"> <slot /> </router-link> <a v-else :ref="link"> <slot /> </a> 您可以在根元素中使用v-if，这样它就可以解决您的问题 或者您可能只是错过了路径部分？ <component :is="type === 'internal' ? 'router-link' : 'a'" :to="type === 'internal' ? { path: link } : null" :href="type !== 'internal' ? link : null" > <slot /> </component> 官方文档包含现在如何执行此操作的示例。 扩展 RouterLink 他们的方法是创建一个处理外部链接的自定义模板。 ...不同之处在于 <router-link> 版本将为链接提供 SPA 功能（即不加载新页面，而是动态呈现组件）。 不加载新页面，我想您的意思是它不会重新加载页面。是的，事实并非如此，因为 onclick 处理程序实际上被分配给一个函数，该函数 执行 preventDefault（防止页面重定向），同时 将新条目推入历史堆栈。 如果您查看 API 参考，<router-link> 为您所做的最引人注目的事情是它根据活动/当前路线在 active-class 之间切换。 因此，话虽如此，您可以通过 <a> 在默认插槽内进行动态 v-slotnchor 渲染；因为此时， href slot 属性将是一个已解析的 URL，然后您可以安全地将其绑定到 DOM href 属性。 编辑 添加了一个示例（未经测试）。 <router-link :to="link" v-slot="{ href, route, navigate, isActive, isExactActive }"> <a :class="isActive ? 'your-custom-class' : 'anything'" :href="type !== 'internal' ? href : 'javascript:void(0);'" @click="customNavigate(navigate.bind($event))"> <slot></slot> </a> </router-link> 其中 customNavigate 处理程序可能类似于： { methods: { customNavigate(navigate) { if (this.type === 'internal') { navigate(); return false; } } } } 您基本上可以根据插槽属性在组件内锚标记上添加任何属性，例如以某些方式导航，添加特殊类，具体取决于您的用例。 您的代码是正确的，但它包含一个致命的错误： :href="type !== 'internal' ? link : null" 这一行的意思是“如果 type 是内部的，则将 href 属性设置为 null”。 router-link 组件将 to 属性转换为字符串，然后将其绑定为 href 属性，但它无法设置已解析的 href 属性，因为您已经将其设置为 null。 一种解决方案是仅绑定必要的属性： const params = computed(() => { if (type === "internal") { return { to: props.to, }; } return { href: props.href, }; }) <component :is="type === 'internal' ? 'router-link' : 'a'" v-bind="params" > 希望有帮助！
我尝试使用 ffmpeg.js 上传和压缩视频。然而，这个过程似乎在现代浏览器上无效。我已经实现了控制台日志记录来验证视频是否正确
使用 Vue v-for 指令时，我应该在 :key atrribute 中写什么来强制某些项目在列表更新时始终重新渲染？ 当然，我可以在外部使用简单的整数计数器并递增......
我正在尝试将现有的 vue/vuetify 项目合并到 Ionic 中。大部分工作正常，但我无法正确渲染任何表单输入 - 它们都垂直显示： <... 我正在尝试将现有的 vue/vuetify 项目合并到 Ionic 中。大部分工作正常，但我无法正确渲染任何表单输入 - 它们都垂直显示： <template> <input type="checkbox" id="checkboxSizes" @change="emit('changeImages')" /> <label for="checkboxSizes">Random sizes</label> .... .... </template> 显示为 在 Ionic 项目中，而不是 应该如此。 对于其他 html 输入以及 Vuetify 输入组件也会发生同样的情况。其他 Vuetify 组件（例如 v-chip）正确显示。 事实证明与 Ionic 无关。在将两个项目合并在一起时，一个组件的部分没有确定作用域，因此影响了它不应该影响的组件。 <style scoped> /* <--- I forgot this 'scoped' */ label { display: inline-block; margin-left: 10px; width: 20px; } line { stroke: darkGreen; stroke-width: 5px; } </style>
我正在尝试将现有的 vue/vuetify 项目合并到 Ionic 中。大部分工作正常，但我无法正确渲染任何表单输入 - 它们都垂直显示： <... 我正在尝试将现有的 vue/vuetify 项目合并到 Ionic 中。大部分工作正常，但我无法正确渲染任何表单输入 - 它们都垂直显示： <template> <input type="checkbox" id="checkboxSizes" @change="emit('changeImages')" /> <label for="checkboxSizes">Random sizes</label> .... .... </template> 显示为 在 Ionic 项目中，而不是 应该如此。 对于其他 html 输入以及 Vuetify 输入组件也会发生同样的情况。其他 Vuetify 组件（例如 v-chip）正确显示。 将 dout 与 Ionic 无关。在将两个项目合并在一起时，一个组件的部分没有确定作用域，因此影响了它不应该影响的组件。 <style scoped> /* <--- I forgot this 'scoped' */ label { display: inline-block; margin-left: 10px; width: 20px; } line { stroke: darkGreen; stroke-width: 5px; } </style>
我刚刚开始学习 vuejs，我尝试运行一些代码来应用我所学到的知识，通过使用 Vue.component('nameOfComponent', { }); 在 vue 实例中创建一个基本组件，还
我正在努力让我的 vuetify 表单按预期运行。我试图在点击提交后验证我的表单而不刷新，但我的两个组件也依赖于另一个。该...