vue.js 相关问题

Vue.js是一个开源的，渐进式的Javascript框架，用于构建旨在逐步采用的用户界面。 Vue.js主要用于前端开发，需要中级HTML和CSS。应该标记特定于Vue.js版本2的问题[vuejs2]。

我试图在我的根 App.vue 中添加一些依赖于当前路线的逻辑（应用程序加载后），但我发现 Route.name 未定义，当我尝试记录时原来的路

vue.js vue-router

回答 1 投票 0

如何在 Laravel/Inertiajs 应用程序下安装 Midone - Vuejs 3 管理仪表板模板？

我的公司购买了 Midone - Vuejs 3 管理仪表板模板 + HTML 版本 + XD 设计文件（https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408）我尝试使用 HTML 版本...

laravel vue.js inertiajs

回答 2 投票 0

Vue - 当 Button 放置在修改对象上方时（使用 Bootstrap btn），@click 不会触发

这有效：这不起作用删除最后一个 - 按钮负责从“产品表”中删除行。我不明白这里的问题是什么。活动是否总是需要...

vue.js button

回答 1 投票 0

如何在三个不同的div元素上设置ref，然后访问这些元素的数组？

我想要访问三个 div 元素。我在所有三个 div 上设置了相同的“ref”值，但是当尝试在 Vue 中检索这些元素时，“elements”变量为空。我期待什么

vue.js vuejs2

回答 1 投票 0

在 Vue 3 + TypeScript + Options API 中使用 refs

我试图了解将 refs 与 TypeScript 和 Options API 一起使用的最佳方式。在文档中，他们像下面一样引用它，但没有使用 TS。说到TS，他们只

vue.js

回答 3 投票 0

如何使用 html css 配置 vue-quill-editor 富编辑器，在 vue js 3 框架中

我正在尝试使用 html css 创建一个丰富的编辑器。我正在使用 Vue js 3 框架。我尝试执行此命令： npm install vue-quill-editor ，效果很好，但我无法更改...

javascript html css vue.js text-editor

回答 2 投票 0

使用vue.js在子组件中调用父方法

我只想知道如何从子组件调用父函数。我尝试使用 $parent 来调用父方法，但出现此错误类型错误：_this.$parent.forceRender 不是

vue.js methods components parent-child parent

回答 2 投票 0

@click 在使用 v-html 渲染时不起作用

我有一个组件，我希望我可以使用来自父级的数据和列对象创建行和列。我遇到一种情况，我需要将 html 模板渲染到

javascript vue.js

回答 2 投票 0

AWS S3 上的 Vue 项目返回 405

我正在我的 vue 项目中集成支付网关。一切在我的本地服务器上运行良好。但是在 axios POST 上将其部署到 S3 后出现 405 错误。常量标头 = { 授权：&...

vue.js amazon-s3 axios http-status-code-405

回答 1 投票 0

错误：找不到模块@rollup/rollup-linux-x64-gnu。在 Docker 容器上

我进行了 Docker 设置来运行我的 Vue 项目，但是当容器开始运行时，我收到标题中的错误。更多细节：前端-1 | > 前端@0.0.0 开发前端-1 | > 维特 Fr...

docker vue.js docker-compose vite

回答 1 投票 0

Nuxt3 build .output 文件夹保持为空，没有从 .nuxt 复制任何内容

我遇到了一个相当奇怪的问题（在对 Web 应用程序 Vue2+Nuxt2 ===> Vue3+Nuxt3 进行重大重构之后发生，尽管我不确定这是否直接相关）。问题...

vue.js nuxt.js vite nuxt3 nitro

回答 1 投票 0

在函数中放置一个值（已解决）

在 vue.js 中，我希望能够做到这一点： {{ 商品名称 }}, {{ 商品价格}} ... 在 vue.js 中，我希望能够做到这一点： <ul> <li v-for="item in preDefItems"> <span v-model="itemName">{{ item.name }}, {{ item.price}}</span> <input type="button" value="+" v-on:click="addItem({{item.name}}, {{item.price}}, {{item.name}})"/> </li> </ul> 然后使用方法addItem()函数，检索值。但我发现上面的方法不起作用？我想使用 vue.js 访问函数并发送值。 const app = Vue.createApp({ data() { return { itemType: '', itemName: '', itemUrl: '', itemNumber: null, added: 'no', order: [], preDefItems: [ { name: 'Apple', type: 'Fruit', price: '2.00' }, { name: 'Banana', type: 'Fruit', price: '1.00' }, { name: 'Orange', type: 'Fruit', price: '2.50' }, { name: 'Kiwi', type: 'Fruit', price: '3.00' }, { name: 'Cherries', type: 'Fruit', price: '5.00'} ] } }, methods: { addItem(){ let item = { name: itemName, number: itemNumber, url: itemUrl } this.added = 'yes' this.order.push(item) } } }） app.mount('#app') 您需要按如下方式使用它： <input type="button" value="+" v-on:click="addItem(item.name,item.price)"/>

vue.js

回答 1 投票 0

VueJS：在运行时跟踪父槽中子组件的顺序

我有一个自定义组件，其中父组件和子组件数组紧密耦合，并且父组件和子组件之间使用 p...

vue.js vue-component

回答 1 投票 0

Nuxt 3 获取多部分表单数据上传不起作用

无论出于何种原因，我无法将图像上传到我的服务器。但当使用 RapidAPI 和完全相同的图像执行此操作时，它会起作用。我在这里做错了什么？鹅毛笔编辑器代码：无论出于何种原因，我无法将图像上传到我的服务器。但当使用 RapidAPI 和完全相同的图像执行此操作时，它会起作用。我在这里做错了什么？ QuillEditor代码： <template> <QuillEditor :modules="modules" :toolbar="toolbar" theme="snow" toolbar="full" /> </template> <script> import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css'; import ImageUploader from "quill-image-uploader"; const runtimeConfig = useRuntimeConfig(); const { fetch } = useSmartFetch(); export default { setup: () => { const toolbar = [ ['image', 'link'], ['emoji'] ]; const modules = { name: "imageUploader", module: ImageUploader, options: { upload: (file) => { return new Promise(async (resolve, reject) => { const formData = new FormData() formData.append('image', file); console.log(file) console.log(formData) const authStore = useAuthStore() const response = await $fetch(runtimeConfig.public.api.image.upload, { method: 'POST', body: formData, headers: { 'Authorization': 'Bearer ' + authStore.accessToken, 'Content-Type': 'multipart/form-data' } }) }); }, }, }; return { toolbar, modules }; }, components: { QuillEditor, }, }; </script> 当我检查我的请求时，我已将不记名令牌设置为进行身份验证（否则我会得到 401 而不是 422）以及 Content-Type: multipart/form-data。甚至我的有效负载也包含表单数据。这是我的有效负载的开始： -----------------------------118964521239883964394155378140 Content-Disposition: form-data; name="image"; filename="1705385217523.jpg" Content-Type: image/jpeg ... ... ... 但是，在 Laravel Telescope 中我的有效负载是空的：使用 RapidAPI 执行完全相同的操作时：一切正常，没有任何问题。此外，还设置了有效负载：怎么会这样？我很确定我的后端可以工作，并且已经过测试。但我也确信我正确地执行了请求。有人可以帮助我吗？亲切的问候更新（添加了开发控制台的图像）： 204 选项请求： 422 帖子请求：使用 FormData 时，不应显式设置 Content-Type 标头。这将阻止您的浏览器使用用于分隔表单字段的边界表达式设置 Content-Type 标头。更多信息可以在MDN上找到。因此，更改您的 fetch 请求： const response = await $fetch(runtimeConfig.public.api.image.upload, { method: 'POST', body: formData, headers: { 'Authorization': 'Bearer ' + authStore.accessToken, } })

laravel vue.js post fetch multipartform-data

回答 1 投票 0

将值放入函数中

在 vue.js 中，我希望能够做到这一点：在 vue.js 中，我希望能够做到这一点： <ul> <li v-for="item in preDefItems" v-bind:value="item.name" v-show="item.type===itemType"> <span v-model="itemName">{{ item.name }}, {{ item.price}}</span> <input type="button" value="+" v-on:click="addItem({{item.name}}, {{item.price}}, {{item.name}})"/> </li> </ul> 然后使用方法addItem()函数，检索值。但我发现上面的方法不起作用？我想使用 vue.js 访问函数并发送值。您需要按如下方式使用它： <input type="button" value="+" v-on:click="addItem(item.name,item.price)"/>

vue.js

回答 1 投票 0

更新$slots获取的子组件中的数据

我正在使用 VueJS 3.4.25 和选项 API。所以我将这两个组件定义如下： // 组件A ... ... ...</desc> <question vote="0"> <p>我正在使用 VueJS 3.4.25 和选项 API。</p> <p>所以我将这两个组件定义如下：</p> <pre><code>// ComponentA <template> ... <slot></slot> ... </template> <script> export default { ... methods: { fireComponentAMethod() { const slotNode = this.$slots.default()[0]; slotNode.type.methods.fireComponentBMethod(); }, }, } </script> </code></pre> <pre><code>// ComponentB <template> ... isValueSet: {{ isValueSet }} ... </template> <script> export default { ... data() { return { isValueSet: false, }; }, methods: { fireComponentBMethod() { console.log("I just fired fireComponentBMethod"); this.isValueSet = true; console.log(this.isValueSet); }, }, } </script> </code></pre> <p>Ans 在其他地方我以这种方式设置组件：</p> <pre><code>// Some absolutely unrelated component <ComponentA> <ComponentB /> </ComponentA> </code></pre> <p>这样做的原因是我的目标是提高代码的可重用性，因此有时是<pre><code>ComponentB</code></pre>，有时是<pre><code>ComponentC</code></pre>和<pre><code>ComponentDoubleD</code></pre>内的<pre><code>ComponentA</code></pre>。</p> <p>当 <pre><code>fireComponentAMethod</code></pre> 被触发时，会观察到该问题。它确实会触发 <pre><code>fireComponentBMethod</code></pre> 并且在控制台中我确实看到了</p> <pre><code>I just fired fireComponentBMethod true </code></pre> <p>但变化并没有反映在<pre><code>ComponentB</code></pre>模板中，它一直停留在页面上<pre><code>isValueSet: false</code></pre>。</p> <p>我尝试使用 <pre><code>$refs</code></pre> 来访问孩子们，但我想因为他们在插槽中，所以它不起作用。</p> </question> <answer tick="false" vote="0"> <p>我相信，在大多数情况下，从父组件调用子组件方法是不行的，即使您想实现高水平的可重用性。</p> <p>如果您的用例是：</p> <pre><code><ComponentA> <ComponentB /> </ComponentA> </code></pre> <p>其中 <pre><code><ComponentB /></code></pre> 可以替换为 <pre><code><ComponentC /></code></pre> 或 <pre><code><ComponentD /></code></pre>，并且它始终位于 <pre><code><ComponentA /></code></pre> 内。那么你想要实现的就是所谓的<pre><code>COMPOUND COMPONENT</code></pre>模式。</p> <p>引用 alex vipond <a href="https://rethinking-reusability-in-vue.alexvipond.dev/" rel="nofollow noreferrer">重新思考 vue 的可重用性</a>：</p> <blockquote> <p>在一组复合组件中，有一个父组件管理大部分或全部状态，并且有一些后代组件插入父组件。在内部，这些后代修改并观察父级的状态，准备对其他后代所做的修改做出反应。</p> </blockquote> <p>但最重要的一点是：</p> <blockquote> <p>此外，子组件不能在父组件之外使用。如果没有父母的反应状态，后代就会崩溃</p> </blockquote> <p>现在，我看到很多组件库确实使用了这种模式。例如，Headless UI 的<a href="https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/src/components/menu/menu.ts" rel="nofollow noreferrer">这个菜单组件</a>确实使用了这种模式。父级管理几乎所有状态并通过大量使用<a href="https://vuejs.org/guide/components/slots.html#scoped-slots" rel="nofollow noreferrer">范围插槽</a>和<a href="https://vuejs.org/guide/components/provide-inject" rel="nofollow noreferrer">提供和注入</a>将其提供给子级。</p> <p>此外，Vue.js 官方文档也有一个类似的部分模式，称为 <a href="https://vuejs.org/guide/components/slots.html#renderless-components" rel="nofollow noreferrer">Renderless Components</a>，这是许多 UI 组件库用来实现可重用性的类似模式。</p> <p>因此，对于您的用例，您可以利用<a href="https://vuejs.org/guide/components/provide-inject" rel="nofollow noreferrer">提供和注入</a>来实现类似的可重用性。</p> <p>这个例子将使用<a href="https://vuejs.org/guide/components/provide-inject" rel="nofollow noreferrer">提供和注入</a>，但您也可以使用<a href="https://vuejs.org/guide/components/slots.html#scoped-slots" rel="nofollow noreferrer">作用域插槽</a>来实现类似的结果：</p> <pre><code>// ComponentA.vue <script setup> import { provide } from 'vue' function fireComponentAMethod() { alert('fire') } provide('componentAMethod', fireComponentAMethod) </script> <template> <slot></slot> </template> </code></pre> <p>和<pre><code>ComponentB</code></pre>：</p> <pre><code>// ComponentB.vue <script setup> import { inject } from 'vue' const componentAMethod = inject('componentAMethod') </script> <template v-slot="slotProps"> <button @click="componentAMethod">Click Me</button> </template> </code></pre> <p>这是一个<a href="https://play.vuejs.org/#eNp9Uk1vwjAM/StRLmUSo4ftxAoaIA6bxIa2HXthwUCgJFHiMiTEf5/d8lE+T0nsZ/u9+G1kx7nGKgfZlElQXjsUATB37dTopbMeRc/SacBgR0y8XYqoER9DXBq9XGK7l9juHpvE5SAaQQ+EpctGCPQSIjl2Lt7VSFesHkNmsZVKPobeupBKEZeFFU4USOJKW1mXGJQ1Ez1tzIM1JHXDNalUVKMz8J8OtTXUrSmKDOdGWWb/3osY+hzq+7iagVpcic/DmmOpHHoI4FeQykMOR34KWKb73x+wpvshubTjPCP0neQXBJvlzLGEdXMzJtoVXMH2rViCNtOf0F8jmLAXxUQZuS3wqaRF8Hfdkn6k+9R4LupSs6VfPF37bcdshPN2pccgtjsb8OZ525PcKJ4nJtoXFMp2A8CZHdceSgojooW1iCHRA03mwl3DWsQrqxZF9au9qO6ezdhAbQLwcemWU8ve06nNHBReyCSzBRTnVEVrh7+i4ibfq6YvRfzmiPSVryrTakGA86aE63FKDCCJS/CpWEFqt/8l/mRQ" rel="nofollow noreferrer">简单的 vue.js 游乐场</a>，它使用<a href="https://vuejs.org/guide/components/slots.html#scoped-slots" rel="nofollow noreferrer">作用域插槽</a>和<a href="https://vuejs.org/guide/components/provide-inject" rel="nofollow noreferrer">提供和注入</a>来实现类似的结果。</p> </answer> </body></html>

vue.js vuejs3 vuejs-slots

回答 0 投票 0

Webpack4 npm start 未捕获类型错误

我 npm start Vue 项目没问题，但是我打开浏览器页面是空白的。这是未捕获的以下错误，类型错误：无法读取未定义的属性“调用” 控制台视图如下，未捕获的类型错误：

javascript vue.js webpack

回答 2 投票 0

Vuejs/Ionic 中的 Vuetify 模板

我对 vue-ionic 感到困惑。我决定用 Ionic 制作移动应用程序。没关系。然后我就不能使用Angular了。我为前端安装了 vuejs。 (vue-ionic)。之后我决定使用 Vuetify

ionic-framework vue.js vuetify.js

回答 2 投票 0

Vuejs 和 quarkus 开发和部署

我是一名初学者，有很多操作系统问题，但这里有一个我需要建议。我进入了一家正在构建程序的公司，该程序的后端是在 Quarkus (java) 中构建的，前端是......