vue-component 相关问题

如何在 Vue 3 中将动态属性从父组件同步到子组件

我有一些产品，我想使用复选框根据其类别进行过滤。 为此，我有一个父组件，它将可能的类别（例如 A、B 和 C）传递给子组件并保留

Vue 3：如何使用组合 API 正确更新组件 props 值？

我喜欢这个组件： 当前坐标：{{坐标}} 我喜欢这个组件： <template> <div> <p>Current coords: <strong>{{ coords }}</strong></p> <button type="button" @click="updateCoords"> </div> </template> <script> export default { props: { coords: { type: Array, required: true } }, setup(props) { const updateCoords = () => { props.coords = [38.561785, -121.449756] // props.coords.value = [38.561785, -121.449756] } return { updateCoords } }, } </script> 我尝试使用 coords 方法更新 prop updateCoords 值，但收到错误消息： 未捕获类型错误：无法设置未定义的属性（设置 ‘坐标’) 在我的情况下如何正确更新 props 值？ 道具是只读的： https://v3.vuejs.org/guide/component-props.html#one-way-data-flow 如果你想要有两种方式绑定 props，你需要实现 v-model 模式： https://v3-migration.vuejs.org/writing-changes/v-model.html#_3-x-syntax <template> <div> <p>Current coords: <strong>{{ coords }}</strong></p> <button type="button" @click="updateCoords"> </div> </template> <script> export default { props: { modelValue: { type: Array, required: true } }, emits: ['update:modelValue'], setup(props, {emit}) { const updateCoords = () => { emit('update:modelValue', [38.561785, -121.449756]) } return { updateCoords } }, } </script> 如果你想更新 props 并在 vue 3 中更改它，你必须根据你的代码纠正你的代码，如下所示： <template> <div> <p>Current coords: <strong>{{ coords }}</strong></p> <button type="button" @click="updateCoords"> </div> </template> <script> export default { props: { componentPropsName: { type: Array, required: true } }, emits: ['update: componentPropsName'], setup(props, {emit}) { const updateCoords = () => { emit('update:componentPropsName', [38.561785, -121.449756]) } return {updateCoords} }, } </script> 但是要点是在父组件中的组件中调整你的道具，如下所示： //parent component <child-component v-model:component-props-name="value"/>

管理在 v-for 中创建的 v-select 中的 v-model 值

我有一个由 v-for 创建的成员表，一些用户可以根据其角色管理其他成员。我实施了一些检查以防止某些角色干预，但检查的完整列表我......

我在安装 NuxtJs 时遇到错误

我一直在尝试在我的系统中安装 NuxtJs，已安装并更新了 npm/npx 仍然出现错误 这是我的错误日志 我成功安装了 Nuxt，但在启动 ap 时遇到错误...

如何让2个子组件更新同一个父属性？

我有一些产品，我想使用复选框根据其类别进行过滤。 为此，我有一个父组件，它将可能的类别（例如 A、B 和 C）传递给子组件并保留

使用 vue 组件将 axios 请求中的文件发送到 api - 为什么它*为空*？

在我的 vue 组件中，我有一个表单。 其中有这个字段： 在我的 vue 组件中，我有一个表单。 里面有这个字段：<input type="file" name="image" id="image" class="form-control" required ref="image"> 当我登录时this.$refs.image.files[0]它返回这个 File {name: 'random-image.jpg', lastModified: 1684076710626, webkitRelativePath: '', size: 983632, …} 但是发送axios post请求时，payload是image:{}，所以图片并没有真正发送出去。 我正在尝试将文件/图像提交到 API，我是否遗漏了什么？ 如果提供的代码片段返回图像的数据，为什么它没有被发送到API？ 我尝试过其他问题的答案，但这些都没有解决问题。我知道我忘记了一些事情，但不知道是什么。 编辑1： 所以当我这样做时 async submitForm(){ let formData = new FormData(); formData.append('image', this.$refs.image.files[0]); formData.append('name', this.name); formData.append('price', this.price); let response = await submitProductForm(formData) 它确实有效。 但是使用 FormData 和不使用 FormData 有什么区别呢？现在在有效负载中，image是binary，而不是file。 enctype="multipart/form-data"我相信这解决了问题。不确定，因为这是一个很老的问题。

Vue CLI 组件样式标记 NOT 范围未应用于 Rails CSP 错误

我有一个带有 Vue 的 Rails 应用程序。当我尝试在 标签中添加某些内容时，它不会被应用。它在渲染的 HTML 中也不可见。我的依赖项中没有 css-loader...</desc> <question vote="1"> <p>我有一个带有 Vue 的 Rails 应用程序。当我尝试在 <pre><code>&lt;style&gt;</code></pre> 标签中添加某些内容时，它不会被应用。它在渲染的 HTML 中也不可见。我的依赖项中没有 css-loader，当我安装它时，整个应用程序无法工作。</p> <p>我的index.html.erb</p> <pre><code>&lt;%= stylesheet_pack_tag &#39;hello_vue&#39; %&gt; &lt;%= javascript_pack_tag &#39;hello_vue&#39; %&gt; </code></pre> <p>我的<pre><code>hello_vue.js</code></pre></p> <pre><code>import Vue from &#39;vue&#39; import App from &#39;../app.vue&#39; document.addEventListener(&#39;DOMContentLoaded&#39;, () =&gt; { const app = new Vue({ render: h =&gt; h(App) }).$mount() document.body.appendChild(app.$el) console.log(app) }) </code></pre> <p>我的<pre><code>app.vue</code></pre></p> <pre><code>&lt;template&gt; &lt;div id=&#34;app&#34;&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { } &lt;/script&gt; &lt;style&gt; #app{ background: aqua; } &lt;/style&gt; </code></pre> <p>我的 <pre><code>package.json</code></pre> 与 css-loader （不起作用）</p> <pre><code>{ &#34;name&#34;: &#34;name-of-project&#34;, &#34;private&#34;: true, &#34;dependencies&#34;: { &#34;@rails/actioncable&#34;: &#34;^6.0.0&#34;, &#34;@rails/activestorage&#34;: &#34;^6.0.0&#34;, &#34;@rails/ujs&#34;: &#34;^6.0.0&#34;, &#34;@rails/webpacker&#34;: &#34;5.4.3&#34;, &#34;css-loader&#34;: &#34;^6.3.0&#34;, &#34;leaflet&#34;: &#34;^1.7.1&#34;, &#34;turbolinks&#34;: &#34;^5.2.0&#34;, &#34;vue&#34;: &#34;^2.6.14&#34;, &#34;vue-loader&#34;: &#34;^15.9.8&#34;, &#34;vue-template-compiler&#34;: &#34;^2.6.14&#34;, &#34;vue2-leaflet&#34;: &#34;^2.7.1&#34;, &#34;webpack&#34;: &#34;^4.46.0&#34;, &#34;webpack-cli&#34;: &#34;^3.3.12&#34; }, &#34;version&#34;: &#34;0.1.0&#34;, &#34;devDependencies&#34;: { &#34;@vue-leaflet/vue-leaflet&#34;: &#34;^0.6.1&#34;, &#34;webpack-dev-server&#34;: &#34;^3&#34; } } </code></pre> <p>（我删除了我的实际代码，但一开始也不起作用）</p> <p>当我在浏览器中使用检查编辑样式时，它可以工作。另外，当我添加内联样式时，它会起作用，例如：</p> <p>我使用 <pre><code>rails install:webpacker:vue</code></pre> 命令安装了 vue。当我只创建一个 vue 项目时，它运行得很好，但是，这次使用 vue 时它似乎不起作用，我不知道为什么。</p> <p>编辑： 这与由于 CSP 的原因样式标签被阻止加载这一事实有关。根据 Vue 的说法，这种情况不应该发生，但它确实发生了，而且网络上没有任何答案。 <a href="https://i.stack.imgur.com/UDqD5.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL1VEcUQ1LnBuZw==" alt=""/></a></p> </question> <answer tick="true" vote="0"> <p>我在<a href="https://medium.com/@acesubido/solving-csp-problems-on-vue-2-0-and-rails-webpacker-3-5-7f2faf086aff" rel="nofollow noreferrer">Medium post</a>上找到了解决方案。最重要的部分是 <pre><code>rails/webpacker.README.mb</code></pre> <em> 的屏幕截图，我在当前的 README.md</em> 中找不到它了。 <a href="https://i.stack.imgur.com/jvyN7.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL2p2eU43LnBuZw==" alt=""/></a></p> </answer> </body></html>

类型错误：无法读取 null 的属性（读取“isCE”）- 自定义组件库

我在使用 ViteJS 和 NPM 为 Vue 3 构建自定义组件库时遇到问题。我在下面提供了我的问题的基本说明，有人可以告诉我我做错了什么或...

如何在商店中制作响应式对象

我正在使用 vue3 和 options api 如下面发布的代码所示，我正在创建一个由标签、dateAvailabilityFrom 和 dateAvailabilityTo 组成的商店，如反应对象状态所示。 什么...

Vuetify - 使用更改事件将所选项目分配给数据属性

我有一个 v-select，如下所示： 我有一个看起来像这样的 v-select： <v-select v-model="editedItem.site_id" :items="sites" label="Sites" item-text="name" item-value="id" ></v-select> 网站项目如下所示： 0: city: (...) client: Object created_at: "2020-08-20T11:11:12.000000Z" created_by: "..." deleted_at: null id: 1 name: "Lemmer" updated_at: "2020-08-24T03:53:39.000000Z" updated_by: "..." client_id: (...) country: (...) country_id: (...) created_at: (...) created_by: (...) deleted_at: (...) id: (...) name: (...) office: (...) street: (...) updated_at: (...) updated_by: (...) zipcode: (...) 所以现在我想将 @change 事件放在 var 中的 sites.client.name 中。 这里最好的方法是什么？ 我试过这个： <v-select v-model="editedItem.site_id" :items="sites" label="Sites" item-text="name" item-value="id" @change="clientname = sites.client.name" ></v-select> 但我收到此错误： [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'name' of undefined" 在您的情况下，您不能使用 site.name，因为如果您设置 item-value="id"，站点值将与 id 相同。 我为你的问题做了一个简单的代码笔。 请参考一下。 https://codepen.io/plsdev89/pen/OJNpmyG <label>Client name: {{clientname}}</label> <v-select :items="sites" label="Sites" item-text="name" item-value="id" @change="handleSiteChange" ></v-select> ... handleSiteChange(id) { let site = this.sites.filter(item => item.id === id); if(site.length > 0) { this.clientname = site[0].name; } }

Vue3：将所有 $attr 传递给子级但排除侦听器

由于 $attrs 和 $listeners 现在在 Vue3 中合并，如何将除监听器之外的所有 $attrs 传递给子进程？ 在Vue2中： 但在 Vue3 中，这也会将侦听器泄漏到

vuejs 中图表的反应状态

我的 vue 代码上有一个图表，其中有 30 天、7 天、昨天的过滤器。 如果我单击任何一个选项，我会得到时间戳的最小 Y 值，无论是 30 天、7 天还是昨天，...

VUE 错误：导航时丢弃无效参数“recordIds”、“datasources”

在 Vue 中，我在将参数从一条路线传递到另一条路线时遇到问题。 这就是我的目标路线： { 路径: '/记录修改', name: '记录修改', 成分：

Vue js 获取数据

我有一个应用程序VUE JS，我在导航栏中遇到问题，导航栏包含图像用户，如果我单击图像用户个人资料，带我去个人资料，但如果我导航到另一个用户...

如何访问“onMounted”生命周期挂钩内的变量

我正在尝试使用 ScrollY 属性有条件地渲染我的应用程序中的主菜单。 ChangeCss 函数正在工作，当滚动消失时，我从控制台日志中得到“true”和“false”...

如何访问 VUE 3 中“onMounted”生命周期挂钩内的变量（Composition api、Typescript）

我正在尝试使用 ScrollY 属性有条件地渲染我的应用程序中的主菜单。 changeCss 函数正在工作，当滚动超出

如何将 Vuetify 小吃栏组件垂直居中对齐？

我需要垂直和水平对齐 Vuetify 组件 版本 vue 2.6.10 vuetify 2.1.10 这是组件 Snackbar 的当前代码 我需要垂直和水平对齐 Vuetify 组件 版本 vue 2.6.10 vuetify 2.1.10 这是组件 Snackbar 的当前代码 <v-snackbar class="no-shadow" v-model="snackbarShow" :color="snackbarType" :timeout="snackbarTimeout" > <v-icon class="mr-3">{{ snackbarIcon }}</v-icon> <div>{{ snackbarText }}</div> <v-btn text icon color="white" @click="snackbarShow = false"> <v-icon color="white">mdi-close-circle</v-icon> </v-btn> </v-snackbar> v2 <v-snackbar centered /> v3 <v-snackbar v-model="snackbar" timeout="5000" location="center"> 在 Vuetify 2 中，您可以使用 top/bottom 和 left/right 属性来垂直和水平对齐 Snackbar。例如： <v-snackbar v-model="snackbarShow" top right > {{ snackbarText }} </v-snackbar> 有关详细信息，请参阅文档。 在 Vuetify 3 中，您需要使用 location 属性。例如： <v-snackbar v-model="snackbarShow" location="top right" > {{ snackbarText }} </v-snackbar> 详情请参阅 - 文档、位置格式。 小吃栏难以垂直对齐的原因基本上是因为它不是为此设计的。 Vuetify 只是 Google Material Design 规范的一种实现。就我个人而言，我喜欢 Vuetify 并且经常使用它，但请记住它只是一个组件库，因此他们的文档主要关注于如何使用组件，而没有关于使用哪个组件或何时使用的指导should 或 shouldn't 使用特定组件。这就是为什么我总是参考material.io来获取这些信息，以确保我不会只是以破坏材料设计规则的方式拼凑材料组件。 正如您在此处看到的：https://material.io/components/snackbars 小吃栏特别应该位于屏幕底部。 要获得您想要的样式，您想要在 Vuetify 库中使用的 UI 组件是 v-dialog。 https://vuetifyjs.com/en/components/dialogs/ 从本质上讲，它只是将组件（通常是卡片）水平和垂直居中，同时提供一种简单的方法将其可见性绑定到道具，甚至为您提供 hide-overlay 道具。因此，使用该组件，您可以获得所需的样式，几乎“开箱即用”。 只需确保将组件放置在 UI 的正中心不会导致糟糕的用户体验。 Material.io 在为正确的任务选择正确的组件方面提供了一些出色的指导：https://material.io/components/dialogs#usage

等待Vue.js中的组件渲染

问题简而言之 我正在尝试访问某种 onRendered 生命周期挂钩。 我对此有何发现 类似的问题：Mounted() hook 中的 Vue $nextTick 无法按预期工作 ...

父组件设置b表项的方法

我正在寻找一种干净的方法来通过父组件设置b表的项目。 我正在寻找一种干净的方法来通过父组件设置 b-table 的项目。 <ScrollableComponent ref="scrollTable" class="tableDiv"> <b-table hover bordered no-border-collapse show-empty :items="This need to be set by ScrollableComponent"></b-table> </ScrollableComponent> 我想ScrollableComponent设置b-table的项目。我已经在 ScrollableComponent 中尝试过类似的方法，但这不起作用： <div ref="scrollable-div" @scroll.passive="onScroll" @scrollend="onScroll"> <slot :items="this.items"></slot> </div> 将道具传递给插槽并不是一个好主意，因为页面中的插槽（包括默认插槽）对于ScrollableComponent来说是只读的。 如果你真的想要它，你可以使用 Provide / Inject 代替 props。

Vue3子组件在父组件数据变化时不更新

我在使用 Vue 3 时遇到问题。当我使用子组件并且更新用于生成内容的数据时，子组件不会进行响应式更新。我正在使用 setup() 有趣...