vue.js 相关问题

事件被触发两次 - 由孩子和父母

我很难找出为什么 updateOptions() 函数在下面的简单示例中被触发两次。我能够识别（只需通过日志记录）组件到 f 中的 @change-event...

为什么@click 和@paste 显示 diff 属性

这是我的演示DEMO 在组件 Comp 中，我做了同样的事情，记录 props.id 当我点击comp时，id是正确的 但是当我悬停并粘贴 id 时，它总是相同的，直到我将鼠标移出一会儿...

当我使用 Nuxtjs (SSR) 时，为什么我会在 devtools 的网络选项卡中看到我的请求

我正在使用 nuxt 3.11.1，当我尝试从服务器端发送请求时，我仍然在网络选项卡中看到请求，这让我怀疑我是否正确发送了它们。 我有写...

Vue-draggable-next：增加空列表的检测范围

我正在使用 Vue-draggable-next 和 Vue 3 来实现可拖动列表。我的应用程序有时要求用户将其他列表中的项目拖到最初为空的列表中。我发现拖...

我的服务器上的 vue.js 路由问题 - 不起作用

我有路线，像这样： /关于 /经验 当我单击 localhost/about 时， localhost/ 体验其工作。 但是当我将文件上传到我的服务器（例如 test.com）时，如果我尝试访问 test.com/

a-frame错误'核心：a-assets警告资产加载超时3000ms

<a-scene environment="preset: forest"> <a-assets> <a-asset-item id="duck" src="./assets/duck.glb"></a-asset-item> </a-assets> <a-entity gltf-model="#duck" position="-4 -4 -4"></a-entity> <a-entity camera position="-1.946 2.807 -3.552" wasd-controls look-controls > </a-entity> </a-scene> !error message! core:propertyTypes:warn "#duck" asset not found. http://localhost:8080/assets/duck.glb 404 (Not Found) aframe-master.js?ce54:2199 core:a-assets:warn Asset loading timed out in 3000 ms 我正在尝试将 a-frame 与 Vue 连接，但我无法从 asset 获取文件。我不断收到该错误，但我根本无法解决它。我不习惯a-frame，所以我需要帮助。请帮助我。 还有一个问题是，我设置了environment="preset: forest"属性，但是当我打开服务器时，环境属性不起作用。这有什么问题吗？ 默认情况下，资源加载时间设置为 3 秒。为相当大的资产设置自定义超时为我解决了这个问题。 <a-assets timeout="10000"> <a-asset-item id="duck" src="./assets/duck.glb"></a-asset-item> </a-assets>

如何在 Vue Nuxt 3 项目中包含外部 javascript [StatCounter]？

我需要在 Nuxt 3 项目中包含以下代码，但我似乎无法让它工作： var sc_project=XXXXXXXX; var sc_invisible=1; var sc_se...</desc> <question vote="2"> <p>我需要在 Nuxt 3 项目中包含以下代码，但我似乎无法让它工作：</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security=&#34;XXXXXXXX&#34;; &lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://www.statcounter.com/counter/counter.js&#34; async&gt;&lt;/script&gt; &lt;noscript&gt;&lt;div class=&#34;statcounter&#34;&gt;&lt;a title=&#34;Web Analytics Made Easy - Statcounter&#34; href=&#34;https://statcounter.com/&#34; target=&#34;_blank&#34;&gt;&lt;img class=&#34;statcounter&#34; src=&#34;https://c.statcounter.com/XXXXXX/0/XXXXXX/1/&#34; alt=&#34;Web Analytics Made Easy - Statcounter&#34; referrerPolicy=&#34;no-referrer-when-downgrade&#34;&gt;&lt;/a&gt;&lt;/div&gt;&lt;/noscript&gt; &lt;!-- End of Statcounter Code --&gt; </code></pre> <p>在 Vue（没有 Nuxt）中，有/曾经有一个 <pre><code>index.html</code></pre> 页面，我曾经在其中放置此代码，但 Nuxt 3 项目中不再有 <pre><code>index.html</code></pre> 文件。</p> </question> <answer tick="true" vote="4"> <h1>useHead()</h1> <p>您可以在 <pre><code>app.vue</code></pre> 文件的脚本中使用它：</p> <pre><code>useHead({ script: [ { src: &#34;https://www.statcounter.com/counter/counter.js&#34;, body: true }, { children: &#34;var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security=&#39;XXXXXXXX&#39;; &#34;, body: true, }, ], noscript: [ { children: &#34;&lt;div class=&#39;statcounter&#39;&gt;&lt;a title=&#39;Web Analytics Made Easy - Statcounter&#39; href=&#39;https://statcounter.com/&#39; target=&#39;_blank&#39;&gt;&lt;img class=&#39;statcounter&#39; src=&#39;https://c.statcounter.com/XXXXXX/0/XXXXXX/1/&#39; alt=&#39;Web Analytics Made Easy - Statcounter&#39; referrerPolicy=&#39;no-referrer-when-downgrade&#39;&gt;&lt;/a&gt;&lt;/div&gt;&#34;, body: true, }, ], }); </code></pre> <p><strong>了解更多：<a href="https://nuxt.com/docs/getting-started/seo-meta#components" rel="nofollow noreferrer">https://nuxt.com/docs/getting-started/seo-meta#components</a></strong></p> <p>或</p> <h1>应用程序配置</h1> <p>在您的<pre><code>nuxt.config.ts</code></pre>文件中使用它：</p> <pre><code>export default defineNuxtConfig({ app: { head: { htmlAttrs: { dir: &#34;ltr&#34;, lang: &#34;en&#34; }, link: [{ rel: &#34;icon&#34;, type: &#34;image/x-icon&#34;, href: &#34;/favicon.ico&#34; }], script: [ { src: &#34;https://www.statcounter.com/counter/counter.js&#34;, body: true }, { children: &#34;var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security=&#39;XXXXXXXX&#39;; &#34;, body: true, }, ], noscript: [ { children: &#34;&lt;div class=&#39;statcounter&#39;&gt;&lt;a title=&#39;Web Analytics Made Easy - Statcounter&#39; href=&#39;https://statcounter.com/&#39; target=&#39;_blank&#39;&gt;&lt;img class=&#39;statcounter&#39; src=&#39;https://c.statcounter.com/XXXXXX/0/XXXXXX/1/&#39; alt=&#39;Web Analytics Made Easy - Statcounter&#39; referrerPolicy=&#39;no-referrer-when-downgrade&#39;&gt;&lt;/a&gt;&lt;/div&gt;&#34;, body: true, }, ], }, }, </code></pre> <p><strong>了解更多：<a href="https://nuxt.com/docs/api/configuration/nuxt-config#head" rel="nofollow noreferrer">https://nuxt.com/docs/api/configuration/nuxt-config#head</a></strong></p> <h1>组件</h1> <p>在模板中使用 <pre><code>&lt;NoScript&gt;</code></pre> 和 <pre><code>&lt;Script&gt;</code></pre> 组件：</p> <pre><code>&lt;template&gt; &lt;Script :body=&#34;true&#34;&gt; var sc_project=XXXXXXXX; var sc_invisible=1; var sc_security=&#34;XXXXXXXX&#34;; &lt;/Script&gt; &lt;Script type=&#34;text/javascript&#34; src=&#34;https://www.statcounter.com/counter/counter.js&#34; :async=&#34;true&#34; &gt;&lt;/Script&gt; &lt;NoScript :body=&#34;true&#34;&gt; &lt;div class=&#34;statcounter&#34;&gt; &lt;a title=&#34;Web Analytics Made Easy - Statcounter&#34; href=&#34;https://statcounter.com/&#34; target=&#34;_blank&#34; &gt;&lt;img class=&#34;statcounter&#34; src=&#34;https://c.statcounter.com/XXXXXX/0/XXXXXX/1/&#34; alt=&#34;Web Analytics Made Easy - Statcounter&#34; referrerPolicy=&#34;no-referrer-when-downgrade&#34; /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/NoScript&gt; &lt;/template&gt; </code></pre> <p><strong>了解更多：<a href="https://nuxt.com/docs/getting-started/seo-meta#body-tags" rel="nofollow noreferrer">https://nuxt.com/docs/getting-started/seo-meta#body-tags</a></strong></p> <p>结果将是这样的： <a href="https://i.sstatic.net/A00Ya.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvQTAwWWEucG5n" alt="enter image description here"/></a></p> </answer> </body></html>

Pinia 商店参考符号

当我在 Nuxt3 项目中使用 Pinia 时： const {isSomeFlag} = storeToRefs(someStore); 我看到这种类型的 isSomeFlag isSomeFlag：参考<{ value: boolean [RefSymbol]: true }> 反而 是一些...

使用 Cross-Origin-Embedder-Policy：require-corp 从 Firebase 存储加载图像

要在 Chrome、Firefox 和其他浏览器上使用 SharedArrayBuffer，我已按照此 Mozilla 文档中的说明进行操作，它提到在 Cross-Origin-Embedder-Policy h 上设置 require-corp...

如何解决Coreui项目的node-gyp版本问题？

我正在从事 vue/coreui 项目，需要 npm、node-sass、node-gyp 等库。但是当我安装节点包时，我收到如下错误。我们也使用python3.11。我没解决...

如何使用Webpack导入Chart.js

我有一个使用Webpack的Vue JS项目，需要导入Chart.js。我努力了 // 从 'chart.js/Chart.min.js' 导入图表 当尝试使用该库时，这会导致 js 错误。

由于 Node-sass，带有 github 操作的 Firebase 网站构建失败？

我很高兴使用他们在设置过程中提供的 github 操作将我的 Vue SPA 部署到 Firebase Hosting。 突然间，这些操作失败了，我不知道如何修复。 这是...

vue 加载消息两次

我有 dotnet core 2.0 应用程序，使用 vue.js 和 webpack，直到今天它都运行良好。我没有更改 webpack 配置中的任何内容，并且我认为它与我的组件代码无关。 我注意到我有鳕鱼...

Intellij 在 node_modules/@firebase/firestore 中找不到类型，而是想从 compat 包导入

我正在使用 Intellij 2024.1.1，当我打开 vue/typescript 应用程序时，它想要从我的 firebase/compat 目录而不是常规的 firebase 类型导入。 根本没有导入，npm run dev d...

HTML5 视频流冻结

我在 Vue.js 3 应用程序中有一个流视频播放器，使用 Plyr 播放器通过 Microsoft CDN 从 Azure Blob 存储帐户流式传输 MP4 视频。存储帐户中的数据是私有的，因此访问...

如何在vuetify文本区域标签中使用v图标而不是文本？

是否可以在 vuetify 文本区域标签中使用 v-icon 而不是文本？如果是这样，最好的方法是什么。 这就是我...

如何重置谷歌地图标记图钉样式而不分配新的图钉元素

在触发某些事件后，我需要将标记比例重置为 1。我当前的解决方案是为每个标记分配一个新的 pinElement。我想知道是否有更好的方法来做到这一点。我在想我们...

在 VueJS 中使用反应式数组进行查找、匹配和过滤 - 我该怎么做？

我以为我理解了.value，但显然没有！ :) 这是使用 VueJS v3 和 Composition API。我试图在反应性的人群中找到第一个匹配值。实际上我的数组是

无法使用 create-vue 找到模块“vuex”的声明文件

我正在尝试使用 Vue3 和 typescript 初始化一个项目，但是将 vuex 添加到项目中后，它无法编译。 我做了什么： 首先，我使用 create-vue 创建项目，使用推荐操作...

在Vue.JS中，如何将props值传递和更改到嵌套组件中？

我的要求非常基本且简单，但不知道为什么 ChatGPT 一直给我带有警告消息的答案。 我正在使用 Vue 2。 我有三个嵌套组件：GrandParentComponent，