vue-component 相关问题

[Vue warn]：无法解决组件：v-toolbar-title问题vue3和vuetify 3.0.0-alpha.0版本

我在使用以下配置运行示例应用程序时遇到以下问题。 包.json > "vue": "^3.0.0", > "vue-textarea-autosize": "^1.1.1&...

通过 V-For 改变迭代组件中单个组件的 Prop

我在我的 Vue 项目中面临着下面描述的挑战，并且对该怎么做感到非常困惑。 有一个名为“button-base”的单子组件： 我在我的 Vue 项目中面临着下面描述的挑战，并且对该怎么做感到非常困惑。 有一个名为 button-base 的单子组件： <template> <button :type="buttonType" :class=" { primary_button: buttonClass == 'primary', secondary_button: buttonClass == 'secondary', tertiary_button: buttonClass == 'tertiary', large: large, medium: medium, small: small, xsmall: xsmall, iconName: iconName }" > <div class="text_wrapper"> <span v-if="iconName" class="icon material-icons">{{ iconName }}</span> {{ buttonText }} </div> </button> </template> <script> export default { props: [ "buttonText", "buttonType", "buttonClass", "large", "small", "xsmall", "iconName" ] } </script> 在父组件（feed-card）上使用它，如下所示： <template> <div class="sub_options_left_side"> <button-base buttonType="button" buttonClass="tertiary" :iconName="idCopyIconName" :buttonText="idCopyButtonText" xsmall="xsmall" class="feed_card_option_button" @click="copyId" ></button-base> </div> </template> <script> export default { props: [ //some oter props.. "idCopyIconName", "idCopyButtonText" ], emits: ["copyId"], data() { return { //other unrelated data info.. } }, methods: { copyId() { this.$emit("copyId"); } }, //other stuff.. </script> 上面的组件也是这个最终组件下的子组件(feed-page): <template> <div class="feeds_wrapper_feed_container"> <feed-card v-for="feed in feedList" :key="feed.id" <!-- other props --> :id-copy-icon-name="idCopyIconName" :id-copy-button-text="idCopyButtonText" @copy-id="copyId(feed.id)" ></feed-card> </div> </template> <script> //imports.. export default { //components.. data() { return { idCopyButtonText: "ID", idCopyIconName: "file_copy" } }, methods: { copyId(docId) { //some other stuff copying parameter to clipboard.. this.idCopyIconName = "check"; this.idCopyButtonText = ""; } } </script> 事情是这样的：当用户单击最终触发该 copyId 方法的按钮时，我想更改该按钮的图像并删除其文本以改进一些用户体验 但是仅 that 按钮的图像和文本。 当我按照我展示的方式进行操作时，所有button-base图标和文本都会受到影响，包括未单击的图标和文本，因为它们以相同的v-for迭代。 我应该如何重新构建我的道具和组件来实现我正在寻找的东西。 提前致谢。 您可以按照自己喜欢的方式构建组件，但重要的是要记住 Vue 依赖于数据。并且您的数据应该始终沿着结构向下流动（从父组件到子组件），并且事件可以从子组件上升到父组件，例如，更改父组件中的数据，然后将更新的数据分发到需要它的子组件. 在下面的示例中，数据驱动修改按钮的 css 类。 <base-button :button-text="read ? 'readed' : 'read'" :read="read" @copy-id="$emit('copy-id')"></base-button> 更改仅涉及与我们当前按下的按钮相关的数据。在父组件中，我们找到与该按钮相关的条目，并将其状态更改为“已读”。 copyId(docId) { const indexItemClick = this.list.findIndex(x => x.id === docId); if (indexItemClick !== -1) { this.list[indexItemClick].read = !this.list[indexItemClick].read; } } 之后数据通过 props 传递给子组件，并根据此进行渲染。 ... app.component('base-button', { props: ['type', 'buttonText', 'read'], ... 完整的工作示例。 const app = Vue.createApp({ data() { return { list: [{ id: 1, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', read: false }, { id: 2, text: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ', read: false } ] } }, methods: { copyId(docId) { const indexItemClick = this.list.findIndex(x => x.id === docId); if (indexItemClick !== -1) { this.list[indexItemClick].read = !this.list[indexItemClick].read; } } } }) app.component('base-button', { props: ['type', 'buttonText', 'read'], emit: ['copy-id'], template: ` <button type="button" :class="[read ? 'primary_button' : 'secondary_button']" @click="$emit('copy-id')"> <div class="text_wrapper"> {{ buttonText }} </div> </button> ` }) app.component('feed-card', { props: ['text', 'read'], emit: ['copy-id'], template: ` <div> <p>{{ text }}</p> <base-button :button-text="read ? 'readed' : 'read'" :read="read" @copy-id="$emit('copy-id')"></base-button> </div> ` }) app.mount('#app') .primary_button { background: red; } .secondary_button { background: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script> <div id="app"> <feed-card v-for="l in list" :key="l.id" :read="l.read" :text="l.text" @copy-id="copyId(l.id)"></feed-card> </div> 抱歉我的英语不好）

从与当前组件不在同一级别的其他组件访问$refs

我正在开发一个Vue应用程序。 它有一个标题，然后是主要内容。 嵌套和结构如下 TheHeader.vue -> TheLogin.vue MainContent.vue -> ShoppingCart.vue -> OrderSumm...

Vuetify 3 在单击或悬停时在按钮、v-menu、v-select 和其他组件上提供深色背景

我正在使用 Vue ^3.2.13 和 Vuetify ^3.3.17。每当我使用 v-btn 或 v-menu 或 v-select 时，所选项目上都会出现深色背景。 像这样 这是我的 vuetify.ts 文件： 导入{createVuet...

Vuex Store 可以从控制台或客户端浏览器访问吗？

我正在构建这个 Vue 2 应用程序，我一直读到应该使用 Vuex 状态管理，一开始我不太理解它的概念，但现在在使用 Vue 后，我可以看到......

如何将数据从 v-for 发送到 Vue 中的事件处理程序？

我在将正确的数据发送到 Vue 组件中子组件的事件处理程序时遇到问题。 这是我的代码： 我在将正确的数据发送到 Vue 组件中子组件的事件处理程序时遇到问题。 这是我的代码： <template> <div> <div v-for="item in [1, 2, 3]"> <div @click=test(item)>test</div> <ConfirmModal v-if="showModal" @confirmed=test(item) /> <button v-on:click="showModal = true" ></button> </div> </div> </template> <script> import ConfirmModal from 'ConfirmModal' export default { components: {ConfirmModal}, data() { return {showModal: false} }, methods: { test(item) { console.log(item); this.showModal = false; }, }, } </script> 这是子组件的代码： <template><div class="modal" @click.self="$emit('confirmed')">subtest</div></template> 所以，基本上，我这里有一个数字数组，并使用 v-for 来迭代数组。 为每一项创建一个 test 标签、一个子组件（包含 subtest 标签）和一个按钮。单击按钮时，将显示子组件。当我单击子组件（subtest标签）时，它消失了。 div 是一个标准组件，单击它时会发出 @click 事件。 confirmModal 是一个非常简单的组件，它监听 @click 事件并将它们重定向到 @confirmed 事件。 因此，这段代码生成 3 × 3 项。当我单击任何标签时，会调用 test 方法来记录该项目的值。 当我单击任何 test 标签时，我会在控制台中获得正确的值，即第一个项目为 1，第二个项目为 2，依此类推。 但是，当我单击任何 subtest 标签时，无论我单击哪个链接，我总是会得到 3。 （如果我更改数组中项目的顺序，那么我总是会得到放在数组最后位置的项目）。 我不明白这里发生了什么，这是以相同的方式调用相同的方法。为什么当我点击 3 标签时 subtest 总是登录到控制台？ 如果你想知道我的子组件中的 class=modal 是用来做什么的，我不知道。这是一个非常复杂的项目中两个组件的骨架，由构建在 Liferay 之上的数千个文件组成，并且在许多目录中定义了 .modal 的文件超过十个。所以我不确定这个特定组件从哪个文件加载这个类。我没有把它从这个骨架代码中扔掉，只是因为当我从子组件的 div 中删除这个类时，一切都工作正常。我不知道为什么。类如何阻止接收正确的数据？我不明白这个。 我知道这个错误可能无法重现，因为我没有提供.modal样式的定义，但我还是发布了它，因为我希望您可以在代码中看到其他错误或提出另一种方法如何在 test 事件上执行 @confirmed 方法。 我正在使用 Vue 2。 当我查看您的代码时，您可能忘记在检索发出的事件值时传递参数： <template><div class="modal" @click.self="$emit('confirmed', argumentShouldBeInserted)">subtest</div></template> 这里argumentShouldBeInserted可以是对象、数组或单个变量。 只需调用父组件中的方法即可： <ConfirmModal v-if="showModal" @confirmed="test" />

在 vue 中将 prop 从父组件传递到子组件不起作用

我目前有一个带有 CompositionAPI 的小型 Vue 项目，但现在遇到了问题。 我有一个父组件和两个子组件。子组件用于显示所有用户（其中...

使用 cdn 时，vuejs 应用程序未运行：版本 3

在我当前的笔记本电脑上，我没有 vuejs 配置，因此我使用了 cdn 链接，但代码未运行 <p>在我当前的笔记本电脑上，我没有 <strong>vuejs</strong> <strong>配置</strong>，因此我使用了 <strong>cdn</strong> 链接，但代码未运行</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;script src=&#34;https://unpkg.com/vue@3/dist/vue.global.js&#34;&gt;&lt;/script&gt; &lt;div id=&#34;app&#34;&gt;{{ message }}&lt;/div&gt; &lt;script&gt; createApp({ let message = &#34;hello !&#34; } }).mount(&#39;#app&#39;) &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>我错过了什么？</p> <p>顺便说一句，正如在此网站上检查的那样：<a href="https://vuejs.org/guide/quick-start#using-vue-from-cdn" rel="nofollow noreferrer">https://vuejs.org/guide/quick-start#using-vue-from-cdn</a></p> <p>我应该使用“<strong>setup</strong>”和“<strong>ref</strong>”，但这不是我使用的..（我之前对cdn有一点经验），我相信还有另一种方法</p> </question> <answer tick="false" vote="0"> <p>在 Vue 3 中，与 Vue 2 相比存在一些差异，您编写的代码反映了 Vue 2 风格。具体来说，您正在使用 createApp，但尝试直接在其中声明消息变量，这将不起作用，因为 Vue 3 需要不同的方法来处理数据。</p> <p>以下是如何使用 CDN 更正代码以与 Vue 3 配合使用：</p> <p><strong>更新代码：</strong></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;script src=&#34;https://unpkg.com/vue@3/dist/vue.global.js&#34;&gt;&lt;/script&gt; &lt;div id=&#34;app&#34;&gt;{{ message }}&lt;/div&gt; &lt;script&gt; const { createApp } = Vue; createApp({ data() { return { message: &#34;hello !&#34; }; } }).mount(&#39;#app&#39;); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>主要变化：</strong></p> <ol> <li>数据函数：在Vue 3中，您需要定义一个数据函数 返回一个包含反应数据的对象。</li> <li>访问createApp：由于您使用的是CDN中的全局Vue实例，因此您需要从Vue中解构createApp。这应该可以解决您的问题并且 使用 CDN 链接正确运行 Vue 3 应用程序。</li> </ol> </answer> </body></html>

Vue - 将数据列表传递给子组件

我在这里查看了一些答案，比如这个，据我所知，这应该可以将导入的 json 数据从父组件传递到子组件。 导入和循环数据...

如何清理Nuxt js多余的div容器？

这是我的示例页面： 这是 Nuxt 布局： 这是 Nuxt 编译器生成的结果： 尽你所能...

在 Vue3 和 Vuetify3 中右键单击打开下拉菜单

我正在尝试开发 Vue3 的上下文菜单。我想通过右键单击下拉按钮来显示 v 菜单下的项目列表。我正在使用此链接作为参考，但是当我尝试时......

Vue 调用子子函数的最佳实践？

假设你有一个vue项目在哪里。 App.vue 有一个按钮和一个用于设置画布的子 CanvasView.vue 文件。 CanvasView.vue 文件有一个绘制立方体的子 CubeComponent.vue

如何在Nuxt的asyncData中重定向

我是 vue.js 的新手，我有一个简单的问题。 我有如下代码： asyncData({ 参数, 错误 }) { 返回 Job.api() .fetchByID(params.id) .then((响应) => {

为什么当我将一个项目推入数组时，我的 vue 数组观察器没有被调用

这是一个小型打字稿模块： 从 'vue' 导入 { ref } 从 '~/i18n' 导入 { i18n } 从 'element-plus' 导入 { ElMessageBoxOptions } const { t } = i18n.global 导出 const toasts = ref<

Vue 4：访问vue组件中的窗口对象

我想在 VueComponent 中选择文本，为此，我想使用 窗口获取选择 功能。为了访问窗口对象，我尝试了 //在app.js中 应用程序配置。

在 vue 3 中动态加载 Vuetify 组件

我尝试使用以下代码在 vue 3 项目中动态加载 vuetify 组件： 尝试 {{ 我正在尝试使用以下代码在 vue 3 项目中动态加载 vuetify 组件： <template> <v-chip>try</v-chip> <component :is="object.tag">{{ object.content }}</component> </template> <script> export default { name: 'component1', data: () => ({ object: { tag: 'v-chip', content: 'hey' }, }), } </script> 尝试这个我没有得到任何错误，使用 v-chip 组件通常工作正常，但第二个组件不能很好地工作并且没有被初始化为 vuetify 组件，而是得到以下内容： 我尝试过使用 VChip 或 vChip 但它们也不起作用并且根本没有错误。我还尝试使用一个非 vuetify 组件，这是我创建的一个组件，并且它加载成功。 object.tag 应该是导入的组件，而不是字符串。 // import only needed if ala-carte import VChip from 'somewhere' { object: { tag: VChip } } 我在尝试创建一个动态可重用组件时遇到了同样的问题，我想使用反应式存储状态变量来控制它显示的内容。上网查了一下，终于在Veutify官方文档上得到了解决方案：Vuetify Documentation 这是一个例子； 这就是在 UI 上触发特定更新后我更新的状态变量的样子： customComponent: { status: true, description: "Add Accommodation Units Information", controls: [ { prop: 'type', component: 'v-autocomplete', model: '', options: { items: [ { type: 'Current', description: "Current", }, { type: "Proposed", description: "Proposed", }, ], label: "Proposed or Current Accommodation", 'item-value': "type", 'item-title': "description", type: "string", required: true, disabled: false, }, cols: 12, }, { prop: 'hostType', component: 'v-autocomplete', model: '', options: { items: [ { type: 'Student', description: "Student Accommodation", }, { type: "Staff", description: "Staff Accommodation", }, ], label: "For Students or Staff?", 'item-value': "type", 'item-title': "description", type: "string", required: true, disabled: false, }, cols: 12, }, { prop: 'units', component: 'v-text-field', model: '', options: { type: 'number', label: "Accommodation Units", value: '', required: true, disabled: false, }, cols: 6, }, { prop: 'capacity', component: 'v-text-field', model: '', options: { type: 'number', label: "Capacity", value: '', required: true, disabled: false, }, cols: 6, }, { prop: 'chargesPerSemester', component: 'v-text-field', model: '', options: { type: 'number', label: "Charges per Semester", required: true, disabled: false, }, cols: 12, }, { prop: 'description', component: 'v-text-field', model: '', options: { label: "Description", value: '', required: true, disabled: false, }, cols: 12, } ], actions: { cancel: { caption: "Cancel", disabled: false, options: [], color: ColorHelper.colorsHelper("light"), icon: "mdi-close-circle", fn: async () => { this.$patch({ component: { status: false, controls: {} }, }) } }, submit: { caption: "Submit", disabled: false, options: [], color: ColorHelper.colorsHelper("primary"), icon: "mdi-send", fn: async (payload) => { await this.submitStudentRecord(payload) console.log(this.component) } } } }; 这就是我创建动态组件的方式： <template v-for=" (control) in customComponent.controls" :key="control.prop"> <v-col :cols="control.cols"> <component :is="getCustomComponent(control.component)" :key="control.prop" v-model="control.model" v-bind="control.options" /> </v-col> </template> 首先，我必须手动导入对象中包含的组件： import { VAutocomplete } from 'vuetify/components/VAutocomplete' import { VTextField } from 'vuetify/components/VTextField' 之后；我使用辅助方法根据我为要创建的每个模式指定的组件名称来选择要传递给 vue 3 动态组件的组件，因为无论动态如何，要使用的组件都是已知的。 我的辅助方法： function getCustomComponent(component) { switch (component) { case 'v-autocomplete': return VAutocomplete case 'v-text-field': return VTextField default: return null } }

当我们在组件 nuxt 3 之间导航时，外部脚本并不总是加载 当我们在组件 nuxt 3 之间导航时，外部脚本并不总是加载，我已经创建了组件 仪表板/index.vue 添加了这段代码 使用头（{ 脚本： [ { src: 'ht...

从 Vue 2 中的列表动态导入组件

我有一个门户网站，它以 vue 组件的形式提供不同的服务。我们将服务的所有设置保存在数据库中（包括存储该服务的路径 (=pfad)）。有了这些数据我们

我可以动态加载组件模板吗

是否可以从服务器动态加载模板（包括组件）？或者我可以在渲染之前更改模板吗？ 我想让用户将自己的表单模板存储到

vue中使用key属性控制组件刷新失败

我需要点击一个按钮，通过绑定函数修改组件的键值，发现键值改变了，但是组件并没有卸载重新渲染。 我检查...