vue-component 相关问题

如何在 vue.js 中创建始终大写的输入？

我正在使用 vue.js 创建一个表单，我需要在 vue 中创建始终大写的输入。我知道我可以使用 css 属性 文本转换：大写； 然后转换之前的数据

少数情况下无法执行vue的全局errorHandler

虽然我在 vue 2 项目中遇到问题，但演示也面临类似的问题，即 main.js 中定义的全局错误处理程序不起作用 视图3 https://stackblitz.com/edit/vitejs-vite-sv...

VueJS：简单脚本未处理的错误

还在学习VueJS，我只是想知道为什么当我点击按钮时我的功能选择不起作用。 创建的（）中的所有其余部分都很好并且显示了正确的，但是在我的方法部分......

组件内的 Vue 3 组件

基本上..我有下面的代码，我希望两个组件（a-comp 和 b-comp）都显示在“主”组件（my-component）上。 我的 CodePen 尝试：https://codepen.io/azmvth/pen/vYqdojq c...

当我部署应用程序时，使用 Vue 的 img :scr 动态路径存在问题

->语言：Vue -> 问题：当我将应用程序部署到 verse 网站时，找不到 /cover 和 /audio 文件夹中的文件。 -> 背景：我花了几天时间试图解决...

使用 v-slot:activator 时关闭自定义组件中的 Vuetify v-dialog

我正在尝试创建一个包装 Vuetify v-dialog 的自定义组件。 我在使用对话框内的按钮关闭对话框时遇到问题。 我尝试过很多东西，比如 @emit('input', fal...

Vue 3：为什么在 Vue 3 模板中 ref 时 dom ref 值未定义

我正在使用 Vue 3 beta 版本，我正在尝试访问设置函数中的 ref，我的组件： JS（Vue）： const 子级 = createComponent({ 设置 （） { 让选项卡 = ref() 控制台.log（选项卡）

在控制台中验证不存在的字段错误

我的问题是，当我尝试在系统上使用 VeeValidate 验证我的字段时，出现此错误。 未捕获（承诺中）错误：[vee-validate] 验证不存在的字段：“”。使用“attach()”

如何让 CSS 模块在 Vue 类绑定中工作？

Google 已经帮不了我了。 我在 Vue 中有这样的模板： 每个...

为什么serverPrefetch效果丢失了？

为什么第二个 console.log 中的第二个报价值为 null ？ 从“vue”导入{ref，onServerPrefetch，onMounted，注入}； const axios = 注入('axios'); const 路由 = 注入('路由'); 常量报价 = 参考...

在 Vue Composition API 中获取属性类型

导入组件时是否可以获取其属性类型？ 例如： 从 '.my-component.vue' 导入 MyComponent； const 属性：ComponentProps = { }; 知道如何...

使用vue js的嵌套表格，为什么父行突然右移？

我正在尝试使用 vuejs 制作一个嵌套表格，但是样式太奇怪了，你们知道它有什么问题吗？ 父母桌 这就是当我按下下拉按钮时发生的情况...

Vue.js 插槽未在响应式布局中传递内容

我正在开发一个具有响应式布局的 Vue.js 项目，并且遇到了 AwPage 组件中的插槽无法呈现内容的问题。这是我的设置： index.vue：使用不同的组件...

投资组合过滤器图片库不起作用[已关闭]

我刚开始学习vue js。我在练习的过程中遇到了一些困难。我希望，在我的 vue js 项目中，当访问者点击某个类别时，它将显示该类别中的所有图像...

将具有反应性属性的对象作为 prop 传递会在更新父组件状态时触发子组件 onUpdated 钩子

考虑一个简单的组件 Comp.vue 文件，它仅在更新时在控制台中记录一条消息： // 比较.vue 从 'vue' 导入 { onUpdated } 更新（（）=> { 安慰...</desc> <question vote="1"> <p>考虑一个简单的组件 <pre><code>Comp.vue</code></pre> 文件，仅在更新时在控制台中记录一条消息：</p> <pre><code>// Comp.vue &lt;script setup&gt; import { onUpdated } from &#39;vue&#39; onUpdated(() =&gt; { console.log(&#39;updated component&#39;) }) &lt;/script&gt; &lt;template&gt;&lt;/template&gt; </code></pre> <p>一个 <pre><code>App.vue</code></pre> 文件会挂载 <pre><code>Comp.vue</code></pre> 并在其 <pre><code>onUpdated</code></pre> 挂钩中记录一条消息：</p> <pre><code>// App.vue &lt;script setup&gt; import Comp from &#39;./Comp.vue&#39; import { ref, onUpdated } from &#39;vue&#39; onUpdated(() =&gt; { console.log(&#39;updated parent&#39;) }) const text = ref(&#39;&#39;) const data = ref() &lt;/script&gt; &lt;template&gt; &lt;input v-model=&#34;text&#34;/&gt; &lt;Comp/&gt; &lt;/template&gt; </code></pre> <p>有一个 <pre><code>text</code></pre> 引用绑定到输入元素以触发父元素上的 <pre><code>onUpdated</code></pre>。此时，在文本输入上写入只会在控制台中记录 <pre><code>&#39;updated parent&#39;</code></pre>。</p> <p>如果将具有反应属性的对象作为 prop 传递给 <pre><code>Comp</code></pre>，则在输入文本上写入会在控制台中同时记录 <pre><code>&#39;updated component&#39;</code></pre> 和 <pre><code>&#39;updated parent&#39;</code></pre>：</p> <pre><code>&lt;Comp :data={ data }/&gt; </code></pre> <p>也就是说，<pre><code>Comp</code></pre> 的 <pre><code>onUpdated</code></pre> 钩子会随着 <pre><code>App</code></pre> 状态的变化而被触发。这是一个<a href="https://play.vuejs.org/#eNp9kstOwzAQRX9l5E1aqaQLWJW0EqAuYAGIx86bKJmGlMS2bKdUivLvzOTVIqUsqspzr50zM7cWd8aEhwrFSkQusbnx4NBXZiNVXhptPTzo0sDO6hKCcMkHtgejXIPF3QK0+jRp7DGFpjd3LqkSrZwHj0cPa/bOgmA+VOlG3FepJtX4ymw2h/UGaqkA2KoLDAudzYKq/4qJLSrPLzX0i5YdO1HTwWNpCnLRCSDKlak8HK5KnWKxloJJpFh2YtvcijFIqfm/6bRoefaKWAjvCGOXZ+HeaUXDasmkSOh+XqB9MT4nTClWHTNrcVHon6e25m2Fi6GefGHyPVHfuyPXpHi16NAeUIpR87HNkLBZ3r4/ty2MInVWFeT+R3xDGmHFjJ3tvlIpYZ/5WtrHdqe5yj7c9uhRuaEpBmVn0/qloOXy6C61fsK9Dm/ae7QnmuIQn4m0AYyBms7SLXsmA3IhIrwbrfqUEMLfnJxScrZq0fwCGMAHEQ==" rel="nofollow noreferrer">演示</a>。</p> <p>为了避免这种情况，可以改为传递计算属性：</p> <pre><code>const computedData = computed(() =&gt; ({ data: data.value })) // ... &lt;Comp :data=&#34;computedData&#34;/&gt; </code></pre> <p>但是，我想知道为什么传递 <pre><code>{ data }</code></pre> 会直接导致 <pre><code>Comp</code></pre> <pre><code>onUpdated</code></pre> 钩子在 <pre><code>text</code></pre> 更新时被触发。</p> </question> <answer tick="true" vote="0"> <blockquote> <p>当您在模板中使用 ref 并稍后更改 ref 的值时，Vue 会自动检测更改并相应地更新 DOM...当第一次渲染组件时，Vue 会跟踪渲染期间使用的每个 ref 。稍后，当引用发生变化时，它将触发跟踪它的组件的重新渲染。 [1]</p> </blockquote> <p>我认为这意味着当 <pre><code>text</code></pre> 引用更新时，跟踪它的组件的 DOM（即 <pre><code>App</code></pre>）将重新渲染。如有必要，这会重新计算传递给 <pre><code>data</code></pre> 的 <pre><code>Comp</code></pre> 属性。然后，在问题中描述的情况下，正如 <a href="https://stackoverflow.com/questions/78164762/passing-object-with-reactive-properties-as-a-prop-triggers-child-component-onupd#comment137803992_78164762">Estus Flask 指出的那样，重新计算的 prop 会产生一个新对象，与之前传递的对象不同，从而导致 </a><code>Comp</code><pre> 状态被更新。</pre> </p>但是，如果普通对象未引用脚本部分中声明的变量，则不会重新计算 <p><code>data</code><pre> 属性。</pre> </p><code>&lt;!-- Does not update when input changes --&gt; &lt;Comp :data=&#34;{ data: 2 }&#34;/&gt; </code><pre> </pre>仅当传递的对象引用脚本部分中声明的变量时，才会重新计算 prop。正如问题中提到的，如果对象包含反应数据，则可以使用计算属性。如果没有反应数据，则应在脚本部分定义该对象，然后作为 prop 传递。<p> </p><code>&lt;script setup&gt; const reactiveData = ref(0) const regularData = 0 const computedProp = computed(() =&gt; ({ data: reactiveData.value })) const staticProp = { data: regularData } &lt;/script&gt; &lt;tempalte&gt; &lt;!-- Do not update when input changes --&gt; &lt;Comp :data=&#34;computedProp&#34;/&gt; &lt;Comp :data=&#34;staticProp&#34;/&gt; &lt;/template&gt; </code><pre> </pre>参见<p>完整示例<a href="https://play.vuejs.org/#eNp9U02P0zAQ/SuDL0mlJq0Ep9KuBGgPcAC0C7ccNkqnqRfHtvyRrVTlvzN2PpqilkOkeN6b8ZvnmTP7pHXeemQbtrWV4dqBRef1QyF5o5Vx8EU1Gg5GNZDkq3AI9GSCz2DwsISKAO9wvwQlf+t9Sb/QDWk9v5CVktaBw5ODXchKk2RxiVNO+YS1F6UheH0dLivHWxzS1rMsbZR+dqXjFYHnyN5clermzCA/qCTuKDhNF7B7gPQ6t78vb0vhEbpFvHBqbEg5FxKojLRKYC5UnSZ+aFyXBqULzXX0bVe9sWQpHRw2WhCLTgBbLkkEtFmj9ih2BQvmFGwVqQS/y7Lef25BKgfjBW9HlPASyC9QHUtZo4Us60tG/ia0QfXGrtbkQyz7L+Hi3318dK1nbFezFtiSOUseHHidv1olaYyiLQUL/nKB5od2nDwq2KY3LGClEOrtW4w543E5xqsjVn9uxF/tKcQK9tOgRdNiwSbMlaZG8izAj8/fo38TSLZ6Qez/gE9I7+eDxp722cs9yZ7xotqvcdq5rH/Zx5NDacemgtDA7CK/YDTswa97rV/kvs8/xDwaEnJxXKwbewgwrdrt3foYODen8858hrdRchhRknA9pJcRnT016/4CSxhnug==" rel="nofollow noreferrer">。</a> </p>[1] <p>为什么要引用？<a href="https://vuejs.org/guide/essentials/reactivity-fundamentals.html#why-refs" rel="nofollow noreferrer">，Vue.js</a> </p> </answer></body>

Vue 可拖动移动到上一个列表

我正在使用vue js可拖动插件 它对于单个列表工作得很好，但我需要使用多个列表（比如 Jira board）。我想将一张卡片（元素）从一个列表移动到另一个列表，但是它

Vuetify v-app-bar-title 组件被截断，有足够的空闲空间

我在 Vue/Vuetify 应用程序中使用导航栏，并添加了 v-app-bar-title 组件来显示用户当前所在页面的名称。但是，当我加载某些页面时，标题文本

从可组合项返回带有道具的组件

在 Vue 项目中，我有一个可组合项，它为使用它的组件提供了一些有用的参考。 在我的应用程序中，很可能无论哪个组件使用可组合项，它都需要渲染

Vue Router 如何连续滚动到相同的哈希

我目前正在做一个基于Vue的网站，使用Vue Router进行路由。我处理锚链接的滚动行为的方法如下： const 路由器 = 新 VueRouter({ 路线，

如何确保我不会迭代 javascript / vue js 中未定义的数据集

我正在使用 d3 库编写一个图表，您可以在 d3js.org 上找到该库 我希望创建一个名为的 vue 组件，它将显示一个圆环图 制作它的代码相当大，所以我想把它放在...