vuejs2 相关问题

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

我有一个包含自动单词的文本字段。这意味着在文本字段中输入的任何字母或字符都将自动替换。正如在文本字段中看到的，您无法自由输入任何内容...

vue.js vuejs2 vuetify.js

回答 1 投票 0

我想获取我的b表的上下文信息。该表是从我的组件中调用的：我想获取我的b表的上下文信息。该表是像我的组件中那样调用的： <b-table ... :sticky-header="true" :responsive="true" striped ... > 我可以在 vue devtool 中看到，当我单击排序时，我的 b 表的“上下文”包含我需要的信息：如何将这些信息获取到我的组件中？谢谢你也许我不清楚，但我可以找到我想要的：为了获取我的 b 表的上下文，我必须像这样实例化它： <b-table @context-changed="onContextChange($event)" > 并拥有这样的功能： onContextChange(event: any){ console.log(event) } 当我单击表格的排序箭头时，它会调用我的函数并向我显示排序的“上下文”：

vuejs2 bootstrap-vue

回答 1 投票 0

我使用 Vue Js 创建了一个 Img 组件。但 Img 没有显示

我使用 Vue Js 创建了一个 Img 组件。并且该组件被传递到位于同一目录中的头文件，Img组件包含一个父div。当我通过 Img 组件时...

vue.js vuejs2 vuejs3 vue-component vuetify.js

回答 1 投票 0

Vue2 在扩展表 vuetify 中看不到对象的更新

我在 Vue2 中遇到反应性问题我在 Vuex 中有一个对象数组，这些对象显示在 v-data-table 中，在每个对象内部我有一个数组，当行展开时，该数组填充了数据，我...

javascript vuejs2 vuetify.js vuex vuetify2

回答 1 投票 0

使用 JEST 对 Vue.js 路由器进行单元测试 - 如何模拟页面？

我正在尝试对我的路由器路由进行单元测试，并且根据各种示例，我提出了一些测试用例。我已将路由器分成单独的模块，用于路由、防护装置和路由器......

javascript vuejs2 jestjs

回答 2 投票 0

使用VueJS在另一个窗口中打开PDF文件

在我之前的 Angular 应用程序中，我能够在另一个窗口中打开我的简历，如下所示：在我之前的 Angular 应用程序中，我可以在另一个窗口中打开我的简历，如下所示： <a class="link popup" href="javascript:void(0);" onclick="javascipt:window.open('./../../assets/Resume_Christopher_Kade.pdf');">Resume</a> 在用 Vue 重写我的网站时，我注意到它没有按预期工作，将其更改为： <a class="link popup" href="javascript:void(0);" v-on:click="openPdf()">Resume</a> 在我的组件方法中使用 openPdf()： openPdf () { javascipt:window.open('./../assets/Resume_Christopher_Kade.pdf'); } 单击链接时，将打开一个新页面，并显示以下 URL： http://localhost:8080/assets/Resume_Christopher_Kade.pdf 同时在屏幕上显示空路线，而不是在浏览器的 pdf 查看器中显示 pdf。这个问题可能与我在 Vue 中处理路由的方式有关： export default new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home }, { path: '/work', name: 'Work', component: Work }, { path: '/posts', name: 'Posts', component: Posts }, { path: '*', component: Home } ] }) 为什么它不像 Angular 那样简单？我是不是错过了什么？你想出来了吗？我的解决方案适用于使用本地运行的 Vue CLI 3 创建的项目（我还没有构建我的项目）。我的问题和你的类似。我只是想要 <a> 链接在新选项卡上打开我的 pdf 文件，但我的 url 将单个哈希连接到我的路径并将我重定向到我的主页。这是一个非常简单的修复： <a href="./resume.pdf" target="_blank">resume</a> 只是一个点、正斜杠和我的文件名。我的文件位于 root > public 文件夹下。相对路径导入当您使用相对路径引用静态资源时（必须以 .) 在 JavaScript、CSS 或 *.vue 文件中，资源将被包含进入 webpack 的依赖关系图... https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports 当我尝试做同样的事情时，出现以下错误：暴露我的简历 ./src/assets/resume/Gabriel_Teixeira_Soares_de_Almeida_Resume.pdf 中的错误 1:0 模块解析失败：意外的标记 (1:0) 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders （此二进制文件省略源代码）为了简化这个过程，我看到一些页面重定向到谷歌驱动器链接，所以你仍然可以href，但到你的域之外的链接 <v-btn v-bind:href="resumeLink" target="_blank" color="primary" > <label class="primaryText--text font-weight-light"> Resume </label> </v-btn> “resumeLink”与我的驱动器 PDF 的链接相同对于云中的项目，您可能会获得 Blob 文件 URL 假设您有 Vue CLI 默认生成的 static 文件夹，您可以简单地将 PDF 放在那里并按如下方式操作 <a href="./../static/file.pdf" target="_blank">。

pdf vue.js vuejs2

回答 3 投票 0

在路线更改时更新 VueJs 组件

有没有办法在路由更改时重新渲染组件？我正在使用 Vue Router 2.3.0，并且在多个路由中使用相同的组件。第一次使用效果很好，或者如果我导航到的路线

vue.js vuejs2 vue-component

回答 7 投票 0

获取当前显示的v-data-table页面中显示的值列表

我在项目中使用了 vuejs2 中的 v-data-table 和多个用户页面，在一组列中显示他们的信息（每页显示 25 个用户，总共 60 000 多个用户）。我想得到

javascript vue.js vuejs2 vuetify.js v-data-table

回答 1 投票 0

将文本复制到剪贴板：无法读取未定义的读取“writeText”的属性

我有一个按钮当我点击复制时 copyImageLinkText({ mouseenter, mouseleave }, e) { this.showCopiedText = !this.showCopiedText navigator.clipboard.writeText(this.imageLink) 清除超时(

javascript vue.js vuejs2 vue-component copy-paste

回答 4 投票 0

更改element-ui工具提示的背景颜色

我正在使用 vue.js 2.6.10 和 element-ui 2.15.1。我有以下 element-ui 组件：黑暗我正在使用 vue.js 2.6.10 和 element-ui 2.15.1。我有以下 element-ui 组件： <el-tooltip content="Top center" placement="top"> <span>Dark</span> </el-tooltip> 默认情况下，我会得到一个黑色背景的工具提示。从文档我看到有effect属性，其可接受的值为dark/light。请问有没有办法改变el-tooltip的背景颜色？编辑：尝试过： <el-tooltip content="Top center" placement="top" effect="light" class="custom-tooltip"> <span>Dark</span> </el-tooltip> <style scoped> .custom-tooltip { background-color: #ffcc00; color: #000; } </style> 并得到：也尝试过（按照示例）： <el-tooltip content="Top center" placement="top" effect="light" effect="customized"> <span>Dark</span> </el-tooltip> <style> .el-popper.is-customized { /* Set padding to ensure the height is 32px */ padding: 6px 12px; background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129)); } .el-popper.is-customized .el-popper__arrow::before { background: linear-gradient(45deg, #b2e68d, #bce689); right: 0; } </style> 并得到：您可能需要覆盖原始 CSS，例如： <template> <el-tooltip content="Top center" placement="top" effect="light" class="custom-tooltip"> <span>Dark</span> </el-tooltip> </template> <style scoped> .custom-tooltip { background-color: #ffcc00; color: #000; } </style> 只要您知道要选择正确的元素，就始终可以使用 CSS 来实现自定义样式。我使用 Vue 2 和 Element UI v2 创建了一个 codepen 并检查了 DOM 以确定需要应用哪些 CSS。这是我想到的： <el-tooltip content="Top center" placement="top" effect="customized"> <el-button>Custom Tooltip</el-button> </el-tooltip> /* tooltip body */ .el-tooltip__popper.is-customized { background: #50C878; } /* tooltip arrow body */ .el-tooltip__popper.is-customized .popper__arrow { border-top-color: #50C878; } /* tooltip arrow border */ .el-tooltip__popper.is-customized .popper__arrow::after { border-top-color: #50C878; } 上面的代码仅适用于带有 placement="top" 的工具提示。对于其他展示位置，您需要更改 border-{placement}-color 进行匹配。例如： placement="bottom"需要改变border-bottom-color placement="left"需要改变border-left-color 如果您需要自定义多个不同位置的工具提示，则需要为每个工具提示指定一个唯一的 effect 名称，这会更改 .el-tooltip__popper.is-{effectName} 的 CSS 选择器，这样 CSS 就不会发生冲突。

css vue.js vuejs2 tooltip element-ui

回答 2 投票 0

VueJS：选择同一文件时未触发输入文件选择事件

我们如何在 Vue Js 中文件输入检测相同文件输入的更改

vue.js vuejs2 onchange vuetify.js

回答 5 投票 0

如何通过VueJS应用程序在Google Analytics 4中传递自定义用户维度？

我有一个 VueJS SPA，其中有用户特定信息，我希望在用户登录后将其作为每次点击的自定义维度在 GA 中发送。我已经使用VueGtag插件来集成GA...

vue.js vuejs2 google-analytics google-analytics-4 gtag.js

回答 2 投票 0

如何获取嵌套的金额数组，将它们除以月和日，然后返回一个新值？

我有一个获取用户列表的后端。每个用户每月支付订阅费用，有时可能会因其他因素而有所不同。在前端我可以看到每个用户拥有的总金额...

vue.js vuejs2

回答 1 投票 0

如何在Vue JS中动态渲染组件？

我正在制作一个表单生成器，它使用其中的组件作为输入字段、按钮等。我希望能够根据我传递给它的选项来生成表单。但我无法让它渲染...

javascript vuejs2

回答 3 投票 0

在 VueJS 2.x 中使用“脚本设置”

是一种编译时语法糖，用于在 VueJS 3.x 中使用的单文件组件 (SFC) 中使用 Composition API。我正在尝试让它在 VueJS 2.x 中工作。组合 API 是 </desc> <question vote="2"> <p><pre><code><script setup></code></pre> 是一种编译时语法糖，用于在 VueJS 3.x 中使用的单文件组件 (SFC) 中使用 <a href="https://v3.vuejs.org/api/composition-api.html#setup" rel="nofollow noreferrer">Composition API</a>。我正在尝试让它在 VueJS 2.x 中工作。 Composition API 作为一个单独的模块提供，可以安装在 Vue 2.x 项目中。我安装了该包并编译并运行，但我的绑定在输出中没有显示任何内容。即使是最简单的，例如：</p> <pre><code><script setup> const msg = 'Hello!' </script> <template> <div>{{ msg }}</div> </template> </code></pre> <p>不在网页上显示任何内容。我是否遗漏了什么或者它不支持 Vue 2.x 项目？</p> </question> <answer tick="true" vote="4"> <p>根据 github 存储库，<pre><code>script setup</code></pre> 不是组合 api 的一部分，实现它是编译器的工作。 <a href="https://github.com/vuejs/composition-api/issues/785" rel="noreferrer">您可以在这个 Git Issue 中阅读更多内容</a></p> <p>创建了一个包来实现此功能，您可以在<a href="https://github.com/antfu/unplugin-vue2-script-setup" rel="noreferrer">here</a>找到它，但是它并没有完全实现规范，并且如果您浏览存储库，似乎还存在一些功能问题。</p> <p>总之，在生产环境中使用这个似乎不值得。</p> </answer> <answer tick="false" vote="0"> <p>Vue 2.7 支持<pre><code><script setup></code></pre>；请参阅<a href="https://blog.vuejs.org/posts/vue-2-7-naruto" rel="nofollow noreferrer">发布博客文章</a></p> </answer> </body></html>

vue.js vuejs2 vue-composition-api

回答 0 投票 0

为什么我不能将<v-app-bar>高度设置为自动？

非常简单的代码。页面标题 ... 非常简单的代码。 <div> <v-app-bar app flat > <v-app-bar-title> Page Title </v-app-bar-title> </v-app-bar> <v-container fluid> <v-card height="400" outlined flat > <v-card-title> Card Title </v-card-title> </v-card> </v-container> </div> 一切都按预期进行，但如果我将 height="auto" 添加到我的 <v-app-bar>，就会发生这种情况。看起来 <v-main> 不再正确计算。如何避免这个问题？回答“为什么你无法将<v-app-bar>高度设置为自动”这个问题，你需要深入了解 Vuetify 源代码。所以，基本上 <v-app-bar> 是 <v-toolbar> 组件的扩展。查看源码，我们可以发现 height style prop 是通过以下代码计算的： genContent () { return this.$createElement('div', { staticClass: 'v-toolbar__content', style: { height: convertToUnit(this.computedContentHeight), }, }, getSlot(this)) }, 我们对 this.computedContentHeight 的计算方式感兴趣。看这段代码： computedContentHeight (): number { if (this.height) return parseInt(this.height) if (this.isProminent && this.dense) return 96 if (this.isProminent && this.short) return 112 if (this.isProminent) return 128 if (this.dense) return 48 if (this.short || this.$vuetify.breakpoint.smAndDown) return 56 return 64 }, 答案是：每次当你将一些字符串传递给 height 属性时，Vuetify 都会尝试将其转换为整数值。您试图传递 auto 值，但 parseInt("auto") 是 NaN。这就是为什么你不能传递这个值。我认为，Vuetify 文档中没有很好地解释。如果您真的想要设置height:auto，您可以为您的style="height: auto"组件设置<v-app-bar>。但是，正如 @yoduh 已经说过的，这可能不是你想要的。使用 height="auto"，v-main 不再知道使用多少填充来从应用程序栏偏移页面内容，因为它无法提前知道 height=auto 最终会以像素为单位，因此v-main 最终位于应用栏后面的视口顶部。为了避免这个问题，不要使用 height="auto"。如果您想要较小的应用程序栏，vuetify 提供了您可以使用的 dense 属性，或者您始终可以指定特定的高度像素值我使用的解决方法是在 css 中显式设置高度。简单地在组件上设置 style="height: auto" 是行不通的，因为 vuetify 会覆盖它。为您的组件提供一个 ID，并将类似以下内容添加到您的 css 中： <style lang="scss"> #journal-toolbar { height: auto !important; } !important将覆盖vetify添加的计算值。注意：重写样式可能会产生意想不到的后果，所以要好好测试。它适用于我的场景，其中涉及动态大小的工具栏扩展。

vuejs2 vuetify.js

回答 3 投票 0

如何在 Vuetify 中重置表格的页面选项？

当我在分页的第 2 页时我的选项看起来像这样然后，我创建一条记录，要求我在表上调用 API 来 updateData()。我想将我的分页重置回...

vue.js vuejs2 vue-component vuetify.js

回答 1 投票 0

导航时保留上一页中的过滤器值

这看起来是一件非常简单的事情，但由于某种原因我找不到关于如何做到这一点的明确答案。我有 2 个页面：用户页面，其中包含 v-data-

vuejs2 vuex

回答 1 投票 0

Vue、v-if 和 v-show 哪个更好？

我正在使用 Vue 2 进行项目。我需要知道在哪种情况下性能更好：使用 v-if 或 v-show 时？我有一个很长的列表，每个项目的列表都有一个隐藏的表单，我需要显示...