将此标记用于特定于Vue.js版本2的问题，这是一个用于构建用户界面的开源，渐进式Javascript框架。
非常简单的代码。 页面标题 ... 非常简单的代码。 <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添加的计算值。 注意：重写样式可能会产生意想不到的后果，所以要好好测试。它适用于我的场景，其中涉及动态大小的工具栏扩展。
当我在分页的第 2 页时 我的选项看起来像这样 然后，我创建一条记录，要求我在表上调用 API 来 updateData()。 我想将我的分页重置回...
这看起来是一件非常简单的事情，但由于某种原因我找不到关于如何做到这一点的明确答案。 我有 2 个页面：用户页面，其中包含 v-data-
我正在使用 Vue 2 进行项目。我需要知道在哪种情况下性能更好：使用 v-if 或 v-show 时？ 我有一个很长的列表，每个项目的列表都有一个隐藏的表单，我需要显示...
Vue 2 JEST - [Vue 警告]：找不到元素：#app
我是 Jest 新手，正在尝试运行我的第一个测试。我找不到元素#app。我已将我的应用程序安装在 main.js 文件中，ID 为“app”。我正在使用 localVue 挂载在规范文件中。但同时
当 v-model 值是父标签的可迭代时，Vue 2 可拖动不反应
我正在使用 Vue 2 和 Vuex。接收到的对象首先根据 classCategory 值分类为单独的子对象。 它不起作用，因为draggable中的v-model值是来自父级的键...
我有这个组合框 @change 调用 API + 填充列表 - 完成 ✅ @select doSomething() - 未完成 ❌ 我很难检测出选择了什么。前任。如果我选择“马萨诸塞州”我想要...
如何在vuejs中使用signedURL加载从aws s3下载的图像对象？
其中 imgURL 包含文件名，它是文件名的集合。 方法： { 异步
我正在使用vue2.7.0来封装组件。我想在组件中使用侦听器或 $listeners，但我得到了未定义
从“vue”导入{defineComponent，ref，onMounted}； 导出默认定义组件（{ 名称：“LbTab”， 道具： { 标签：{ 类型：数组， 默认...</desc> <question vote="0"> <pre><code><script> import { defineComponent, ref, onMounted } from "vue"; export default defineComponent({ name: "LbTabs", props: { tabs: { type: Array, default: () => [], }, }, setup(props, { emit, attrs, listeners }) { const active = ref(); onMounted(() => { active.value = props.tabs[0]?.name; }); const handleInput = (val) => { active.value = val; }; const isComponent = (tab) => { return typeof tab.content === "object"; }; console.log(listeners); //undefined return () => ( <el-tabs {...{ attrs, ...listeners }} value={active} onInput={handleInput} > {props.tabs.map((tab, index) => ( <el-tab-pane label={tab.label} name={tab.name} key={index}> {isComponent(tab) ? <tab.content /> : tab.content} </el-tab-pane> ))} </el-tabs> ); }, }); </script> </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 'vue' 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>
我想知道是否有人有在 Vue 3 网站内运行已编译的 Vue 2 应用程序的策略。 我有一系列用 Vue 2 编写的小部件，我正在尝试在由 Vue3 和它提供支持的网站中运行
我正在为 Vue2 项目使用egjs-flicking。 我希望它在移动和桌面屏幕尺寸上使用不同的对齐选项。 有没有一种方法可以在不破坏/init的情况下进行更改？
我必须使用进度栏显示文件的上传状态。我正在使用 axios 发出 http 请求。我按照他们的 github 页面上的示例 https://github.com/mzabriskie/axios/blob/...
Pusher 未定义！ Laravel 5.4 与 Laravel Echo
我不知道我的代码有什么问题 这是我的 app.js /** * 首先我们将加载该项目的所有 JavaScript 依赖项 * 包括 Vue 和 Vue 资源。这是一个很好的开始
对于我的 Vue 项目，我需要使用 webpack，特别是版本 4，考虑到我的其他依赖项。 然而，每当我尝试 npm install webpack@4 --save-dev 它就会进入一个循环......
我正在尝试在选项卡之间进行切换，但发生的情况是我可以切换选项卡，但“已转移”选项卡消失了 ...
处理 this.$router.replace(href);在 vue 2
我是 vue 新手，正在处理我之前创建的 vue 代码。因此，有很多遗留代码太复杂，现在无法更改。 当用户...时，vue 代码可以处于两种状态之一...
我正在研究 Vue.js，我了解到每个 Vue 应用程序都是从使用 Vue 构造函数 new Vue({ })) 创建一个新的 Vue 实例开始的。 到目前为止一切都很清楚，直到我遇到了 Vue。
前端新手。这里——我正在浏览我们的 Vue 2 应用程序，希望将其重新创建为 Vue 3 应用程序。难道在我们现有的 Vue 2 应用程序中，根应用程序（“new Vue”）没有模板钩子......
我正在尝试使用 Element UI 库实现一个简单的管理面板。 我的问题是，当侧菜单隐藏时，内容不会占据100%，解决这个问题的唯一方法是禁用菜单
Element 文档中的所有示例都显示组件彼此间隔良好。 当举一个基本的例子时，例如 新的Vue（{ 埃尔：“#app” }) <p>Element 文档中的所有示例都显示组件彼此间隔良好。</p> <p>举一个基本的例子，例如</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>new Vue({ el: "#app" })</code></pre> <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet" /> <div id="app"> <el-row :gutter="20"> <el-col :span="4"> <el-input></el-input> </el-col> <el-col :span="4"> <el-input></el-input> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="4"> <el-input></el-input> </el-col> <el-col :span="4"> <el-input></el-input> </el-col> </el-row> </div></code></pre> </div> </div> <p></p> <p>您会看到两行 <pre><code><el-input></code></pre> 彼此粘在一起。 </p> <p><pre><code>:gutter</code></pre> 是水平间隔列的解决方案。 <strong>垂直间隔行的正确方法是什么？</strong>（例如参见<a href="https://element.eleme.io/#/en-US/component/input#input-with-icon" rel="nofollow noreferrer">此示例</a>，其中两行间隔开）</p> </question> <answer tick="false" vote="-2"> <p>只需编写 css、边距或填充，因为 <strong>:gutter</strong> 仅用于左右边距。</p> </answer> </body></html>