vue.js 相关问题

以编程方式从 DOM 中删除组件 Vue 3

我正在制作类似于带有单元格的工作表的东西，在其中使用拖放我可以移动事件，即组件。 因为可以从像这样的任何文件添加组件 甚至导入...

最快的方法是什么：脚本设置或设置函数

在 Vue3 中，这两种方法中哪一种运行速度最快： setup() 返回 {}

如何在 Vue 中注入一些字符串并对其求值？

在 SPA 中，使用选项 API，如何（在哪里）定义将从 html href 调用的函数？ 在下面的演示代码中，一切正常。 密码笔 但是，在我的单页上： ...

V-for 在 nuxt.js 中不起作用，我正在尝试循环卡片组件

开发工具告诉我： [Vue warn]：无效的道具：道具“产品”的类型检查失败。期望的对象，得到数组 我的索引页： 开发工具告诉我： [Vue warn]：无效的道具：道具“产品”的类型检查失败。期望的对象，得到数组 my index page: <template> <div class="container" v-if="loading">loading...</div> <div v-else> <div v-for="product in products" :key="product.id"> <product :product="product"/> </div> </div> </template> <script> import Product from '../components/product.vue'; export default { components: { Product }, data() { return { loading: true, products: [], }; }, async mounted() { this.loading = true; const response = await this.$axios.$get("/api/products"); this.products = response; this.loading = false; }, }; </script> 卡片组件： <template> <b-card> </b-card> </template> <script> export default { props :{ product:{ required: true, type:Object } } } </script> 我期待看到两张卡片 我正在尝试在索引页面中渲染卡组件（bootstrap vue），从数据库中获取数据，所以我在数据库中注册了 2 个产品，我应该在我的页面中看到 2 张卡，但我只看到 1 张卡，就像我一样正在放置组件 vue 开发工具说： 产品：阵列 0：对象 描述：“描述” 编号：1 img:“https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=799&q=80” 名称：“产品1” 价格：“10.00” 1：对象 描述：“描述” 编号：3 img：“https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80” 名称：“产品 2” 价格：“12.00” 所以数组中有 2 个产品，如果我尝试更改“数组”中的 props 类型，它的工作效果不一样 状态products是一个对象，包含data。 那是一个数组，所以迭代应该是 <div v-for="product in products.data" :key="product.id"> 这样，Product组件将包含所需的对象。

如何使 i18n 设置异步 Nuxt 3

活动语言和翻译来自 API。我需要找到一种方法将 i18n 设置为异步。 因此，首先我将从 API 获取该网站的可用语言，之后我会...

Nuxt3：为什么这个文本输入元素不遵守 maxlength 属性？

我正在使用 Nuxt3，由于某种原因，以下 HTML 输入元素中指定的 maxlength="70" 属性不受尊重（我可以输入超过 70 个字符）。有谁知道为什么？ <

使用 vue-select 选择图像

在 vue 3 中如何使用 vue-select 进行选择？ ... 如何在 vue 3 中使用 vue-select 进行选择？ <v2-select :options="options" label="title"> <template slot="option" slot-scope="option"> <img :src="option.url"> {{ option.url }} </template> </v2-select> 数据： options: [ { title: 'Read the Docs', icon: 'fa-book', url: 'https://codeclimate.com/github/sagalbot/vue-select' }, { title: 'View on GitHub', icon: 'fa-github', url: 'https://codeclimate.com/github/sagalbot/vue-select' }, { title: 'View on NPM', icon: 'fa-database', url: 'https://codeclimate.com/github/sagalbot/vue-select' }, { title: 'View Codepen Examples', icon: 'fa-pencil', url: 'https://codeclimate.com/github/sagalbot/vue-select' } ], } 示例： https://stackblitz.com/edit/vue-5ni27c?file=src%2FApp.vue,package.json,src%2Fcomponents%2FHelloWorld.vue 在 vue 2 中可以工作，机器人在 vue 3 中不行 您的插槽绑定错误。 检查文档：Vue - 命名插槽和Vue-Select - 插槽 - 选项 这个 <template slot="option" slot-scope="option"> 应该这么写 <template v-slot:option="option"> 左右（使用简写 #） <template #option="option"> 然后就可以了： 更新： slot-scope 在 Vue2 中已弃用 使用以下版本 "vue-select": "^4.0.0-beta.5" 并像main.js那样安装 import { createApp } from "vue" import vSelect from "vue-select" import App from "./App.vue" const app = createApp(App) app.component("v-select", vSelect) app.mount("#app") 然后您可以使用以下内容 <template> <v-select :options="options" label="title"> <template #option="option"> <span><img :src="option.image" />{{ option.title }}</span> </template> </v-select> </template> <script> export default { data() { return { options: [ { title: "Read the Docs", image: "https://source.unsplash.com/random/20x20?sig=1", url: "https://codeclimate.com/github/sagalbot/vue-select", }, { title: "View on GitHub", image: "https://source.unsplash.com/random/20x20?sig=2", url: "https://codeclimate.com/github/sagalbot/vue-select", }, { title: "View on NPM", image: "https://source.unsplash.com/random/20x20?sig=3", url: "https://codeclimate.com/github/sagalbot/vue-select", }, { title: "View Codepen Examples", image: "https://source.unsplash.com/random/20x20?sig=4", url: "https://codeclimate.com/github/sagalbot/vue-select", }, ], }; }, }; </script> 为了这样的结果 PS：请小心，文档中的一些示例确实不是关于 Vue API 的最新内容，尤其是slot-scope，如此处解释（在 Vue3 中不再可用）。

vite hmr 观看日志格式

我正在开发一个 Nuxt3 项目，该项目使用 Vite 作为默认捆绑器。 它的 HMR 工作得非常好，直到我发现每次有任何更改时整个应用程序都会重新启动，控制台...

如何在运行另一个异步函数之前等待异步函数

有2个方法，我想在方法getDownloadUrl完成将所有url推送到数组时将数据推送到数据库 异步 getDownloadUrl(newCardData) { const cardImagesRef = 等待这个....

Nuxt 获取 URL 的 #hashtag 部分

this.$route.path 获取末尾不带哈希码的 URL。如何获取 URL 的哈希部分或获取完整 URL，以便找出如何分离哈希部分？ 明确地说，对于...

由于 axios 模块，我的 nuxt 项目中 Docker compose 构建失败了

我大约六个月前用docker部署了一个nuxt项目，它运行良好，但是现在，我需要重建它，但我得到了这个错误： > [构建器 6/8] RUN 纱线构建：...

$route.params.id 不想在点击饮料时提供 id 数据。 CocktailDB API，nuxt.js

你好，我正在做一个简单的cocktailapp，用coktailDB API https://www.thecocktaildb.com/api.php 练习nuxt.js 和axios。在饮料/index.vue 中，我列出了所有带 v-for 的饮料。单击

如何通过对象中的链接检索图像？

我正在使用 Vue JS 创建一个 Web 应用程序。 我将对象转换为 JSON，但是，用于检索图像的链接仅以字符串形式出现，我知道 JSON

Vue3 使用 Vanilla JS Datepicker

我正在尝试在 Vue3 项目中使用 Vanilla JS Datepicker，但不确定如何正确设置它。根据文档（我意识到与 Vue 没有具体关系），我已经安装了该软件包： npm

Vue.js 动态图像在 v-for 中不起作用

im 尝试在 v 中显示一些图像 - 将结果放入 img src="" 我试图在 v 中显示一些图像-以便将结果放入 img src="" <div v-for="piatto in portata" class="card mb-3"> <div class="row"> <div class="col-lg-4"> <img src="'/img/food/' + piatto.img_id + '.jpg'" alt="" style="height:;" class="img-fluid rounded-start img-thumbnail" > </div> <div class="col-lg-8"> <div class="card-body mt-3"> <h3 class="card-title">{{piatto.food_name}}</h3> <h4 class="card-text text-primary">{{piatto.price}}€</h4> <button type="button" @click="sendOrder(piatto.food_name)" class="btn btn-dark">Aggiungi</button> </div> </div> </div> </div> 如果您正在使用 Webpack 如果图像托管在互联网上的某个地方，您可以这样做 <template> <section style="display: flex"> <div v-for="element in elements" :key="element.id" class=""> <img :src="`${imageInitialUrl}${element.imageId}`" /> <p>{{ element.name }}</p> </div> </section> </template> <script> export default { data() { return { imageInitialUrl: 'https://source.unsplash.com/random/200x200?sig=', elements: [ { id: 1, name: 'bob', imageId: '1', }, { id: 2, name: 'patrick', imageId: '2', }, { id: 3, name: 'sarah', imageId: '3', }, ], } }, } </script> 这就是它的样子。 如果图像是本地的，这就是它的写法 <img :src="require(`@/assets/images/${element.imageId}.jpg`)" /> 有了这样的结构

将 nuxt 3 与 nuxt auth 模块一起使用时出现错误

我正在使用 nuxt 3 + nuxt auth 模块 收到此错误： 这是我的 nuxt 配置 导出默认的defineNuxtConfig({ 模块：[ '@nuxtjs/axios', '@nuxtjs/auth-next' ], ...

如何将 v-calendar -not vuetify- days 格式从 (S,M,T,W) 更改为 (Su,Mo,Tu,We)？

我在 Nuxtjs 应用程序中使用 v-calendar，它以这种格式（S，M，T，W，T，F，S）显示/渲染工作日，我想将其更改为（Su， Mo、Tu、We、Th、Fr、Sa)。 我已阅读文档并尝试使用：formats=...

无法在 github 页面或 netlify 上部署站点。 Nuxt2 和 Tailwind 项目

您好，我已经在 Nuxt2 和 Tailwind 中构建了一个项目。但我无法将它部署在 github 页面或 netflify 上。 这是我在 guthub 中的项目 https://github.com/Astborg/cocktailappNuxt/ 在 github 页面上它的 j...

Vuetify 中的 Html 主题集成

我可以将 CSS 和 JavaScript 文件导入到 Vuetify 中以导入某些组件吗？或者我可以放置一个作为基本 HTML 主题的整个主题吗？ 比如我发现了一个专业人士需要的工具...

生产环境中的 Nuxtjs 日志在哪里？

我遇到了一个仅在在线生产模式下发生的错误。 您的产品 Nuxt.js 日志在哪里？ 我查了文档，但没有提到。