vuejs2 相关问题

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

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

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

回答 5 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

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

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

回答 3 投票 0

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

是一种编译时语法糖,用于在 VueJS 3.x 中使用的单文件组件 (SFC) 中使用 Composition API。我正在尝试让它在 VueJS 2.x 中工作。组合 API 是 </desc> <question vote="2"> <p><pre><code>&lt;script setup&gt;</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>&lt;script setup&gt; const msg = &#39;Hello!&#39; &lt;/script&gt; &lt;template&gt; &lt;div&gt;{{ msg }}&lt;/div&gt; &lt;/template&gt; </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>&lt;script setup&gt;</code></pre>;请参阅<a href="https://blog.vuejs.org/posts/vue-2-7-naruto" rel="nofollow noreferrer">发布博客文章</a></p> </answer> </body></html>

回答 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添加的计算值。 注意:重写样式可能会产生意想不到的后果,所以要好好测试。它适用于我的场景,其中涉及动态大小的工具栏扩展。

回答 3 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 7 投票 0

Vue 2 JEST - [Vue 警告]:找不到元素:#app

我是 Jest 新手,正在尝试运行我的第一个测试。我找不到元素#app。我已将我的应用程序安装在 main.js 文件中,ID 为“app”。我正在使用 localVue 挂载在规范文件中。但同时

回答 1 投票 0

当 v-model 值是父标签的可迭代时,Vue 2 可拖动不反应

我正在使用 Vue 2 和 Vuex。接收到的对象首先根据 classCategory 值分类为单独的子对象。 它不起作用,因为draggable中的v-model值是来自父级的键...

回答 1 投票 0

如何将选择事件添加到自动完成组合框?

我有这个组合框 @change 调用 API + 填充列表 - 完成 ✅ @select doSomething() - 未完成 ❌ 我很难检测出选择了什么。前任。如果我选择“马萨诸塞州”我想要...

回答 2 投票 0

如何在vuejs中使用signedURL加载从aws s3下载的图像对象?

其中 imgURL 包含文件名,它是文件名的集合。 方法: { 异步

回答 2 投票 0

我正在使用vue2.7.0来封装组件。我想在组件中使用侦听器或 $listeners,但我得到了未定义

从“vue”导入{defineComponent,ref,onMounted}; 导出默认定义组件({ 名称:“LbTab”, 道具: { 标签:{ 类型:数组, 默认...</desc> <question vote="0"> <pre><code>&lt;script&gt; import { defineComponent, ref, onMounted } from &#34;vue&#34;; export default defineComponent({ name: &#34;LbTabs&#34;, props: { tabs: { type: Array, default: () =&gt; [], }, }, setup(props, { emit, attrs, listeners }) { const active = ref(); onMounted(() =&gt; { active.value = props.tabs[0]?.name; }); const handleInput = (val) =&gt; { active.value = val; }; const isComponent = (tab) =&gt; { return typeof tab.content === &#34;object&#34;; }; console.log(listeners); //undefined return () =&gt; ( &lt;el-tabs {...{ attrs, ...listeners }} value={active} onInput={handleInput} &gt; {props.tabs.map((tab, index) =&gt; ( &lt;el-tab-pane label={tab.label} name={tab.name} key={index}&gt; {isComponent(tab) ? &lt;tab.content /&gt; : tab.content} &lt;/el-tab-pane&gt; ))} &lt;/el-tabs&gt; ); }, }); &lt;/script&gt; </code></pre> <p><strong>听众未定义,这是错误的</strong></p> <p>我使用**vue2.7.0 **来封装组件。我想在组件中使用侦听器或 $listeners,但我得到了未定义</p> <p>vue3.0监听器和attrs合并,2.7应该做什么?</p> </question> <answer tick="false" vote="0"> <p>考虑使用 <pre><code>getCurrentInstance()</code></pre> 访问当前 Vue 实例(包括父组件监听器)。</p> <p>文档: <a href="https://v3.ru.vuejs.org/api/composition-api.html#getcurrentinstance" rel="nofollow noreferrer">https://v3.ru.vuejs.org/api/composition-api.html#getcurrentinstance</a></p> <p><pre><code>getCurrentInstance()</code></pre>源代码: <a href="https://github.com/vuejs/vue/blob/main/src/v3/currentInstance.ts" rel="nofollow noreferrer">https://github.com/vuejs/vue/blob/main/src/v3/currentInstance.ts</a></p> <p>用途:</p> <pre><code>import { defineComponent, getCurrentInstance } from &#39;vue&#39; export default defineComponent({ setup () { const thisInstance = getCurrentInstance() function eh () { // console.log(this.$listeners) console.log(thisInstance.proxy.$listeners) } return {} } }) </code></pre> <p>它可以在 vue 2.7 中运行,我相信它也可以在 vue 3 中运行,尽管 vue 3 有自己的 <pre><code>attrs</code></pre>。</p> <p>更多关于<pre><code>getCurrentInstance()</code></pre>的信息:<a href="https://stackoverflow.com/questions/72209080/vue-3-is-getcurrentinstance-deprecated">Vue 3:getCurrentInstance() 是否已弃用?</a></p> <p>相关: <a href="https://stackoverflow.com/questions/46706737/check-if-a-component-has-an-event-listener-attached-to-it">检查组件是否附加了事件侦听器 - 堆栈内存溢出 </a> </p></answer>

回答 0 投票 0

在 Vue 3 网站中运行已编译的 Vue 2 应用程序

我想知道是否有人有在 Vue 3 网站内运行已编译的 Vue 2 应用程序的策略。 我有一系列用 Vue 2 编写的小部件,我正在尝试在由 Vue3 和它提供支持的网站中运行

回答 1 投票 0

egjs-flicking 初始化后如何更新选项?

我正在为 Vue2 项目使用egjs-flicking。 我希望它在移动和桌面屏幕尺寸上使用不同的对齐选项。 有没有一种方法可以在不破坏/init的情况下进行更改?

回答 1 投票 0

带有 axios 的进度条

我必须使用进度栏显示文件的上传状态。我正在使用 axios 发出 http 请求。我按照他们的 github 页面上的示例 https://github.com/mzabriskie/axios/blob/...

回答 4 投票 0

Pusher 未定义! Laravel 5.4 与 Laravel Echo

我不知道我的代码有什么问题 这是我的 app.js /** * 首先我们将加载该项目的所有 JavaScript 依赖项 * 包括 Vue 和 Vue 资源。这是一个很好的开始

回答 3 投票 0

Webpack 版本 4 安装不起作用

对于我的 Vue 项目,我需要使用 webpack,特别是版本 4,考虑到我的其他依赖项。 然而,每当我尝试 npm install webpack@4 --save-dev 它就会进入一个循环......

回答 1 投票 0

在选项卡之间切换 Ant Design Vue

我正在尝试在选项卡之间进行切换,但发生的情况是我可以切换选项卡,但“已转移”选项卡消失了 ...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.