vue.js 相关问题

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

在 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) 中构建的，前端是......

java vue.js deployment development-environment quarkus

回答 2 投票 0

Flex 列 PrimeVue 问题

我刚刚开始使用 PrimeVue 并遇到了一个愚蠢的问题。我不明白为什么 flexbox 类不起作用。我完全遵循文档并尝试用 hi 显示输入...

vue.js primevue

回答 1 投票 0

如何在Vue.js2中使用Paged.js？

let paged = new Previewer(); paged.preview('测试', \[\], document.body).then((flow) =\> { console.log("渲染", flow.total, "页数"); }); 面临的问题： 1：1188-1197世博会...

vue.js webpack babel-loader vue-loader pagedjs

回答 1 投票 0

容器如何更改默认插槽中子级的 CSS 显示属性？

我有一个vue游乐场。容器组件需要能够控制默认插槽中未知数量的子组件的 CSS 显示属性。我假设子组件需要...

javascript css vue.js vue-composition-api vuejs-slots

回答 1 投票 0

如何将系列与 ApexCharts 中的特定 Y 轴关联，同时保留自定义系列名称？

我正在 Vue.js 应用程序中使用 ApexCharts，我需要根据系列名称将系列动态链接到特定的 y 轴。然而，我遇到了一个问题，该系列必须......

javascript vue.js charts apexcharts

回答 1 投票 0

为什么在 Vuetify 3 中使用 flex 时宽度会被忽略？

使用 Vuetify 3，我尝试为表格设置自定义分页。一切进展顺利，除了使用 flex 忽略了宽度。 ... 使用 Vuetify 3，我尝试为表格设置自定义分页。一切进展顺利，除了 <v-select> 使用 Flex 忽略了宽度。 <template> <v-app> <v-row class="mt-2"> <v-col cols="12" sm="12"> <div class="d-flex flex-wrap ga-3 justify-end">  <v-select class="d-flex align-center" label="Items per page" density="comfortable" :model-value="itemsPerPage" :items="['5', '10', '25', '100']" variant="outlined" @update:model-value="itemsPerPage = parseInt($event,10)" style="max-width: 150px" ></v-select> <p class="d-flex align-center"> {{ page * itemsPerPage - itemsPerPage + 1 }} - {{ page * itemsPerPage }} of {{ total }} </p>  <v-pagination class="d-flex align-center" density="comfortable" rounded="circle" v-model="page" :length="pageCount" :total-visible="6" ></v-pagination> </div> </v-col> </v-row> </v-app> </template> 还有脚本部分（只是为了ref，仅此而已） <script setup> import { ref } from 'vue' const page = ref(1) const itemsPerPage = ref(10) const total = ref(150) const pageCount = ref(10) </script> 如果您观看<v-select>，您可以看到有一个style="max-width: 150px"完全被忽略（主要是由于class="d-flex align-center"，但我不知道如何使其协同工作）。这里是 Vuetify Playground，可以通过实时片段更好地理解我的意思。编辑：第一张图片是现在的样子这就是我想要的select的样子（加上中心对齐，我无法设置，除了使用边距或填充，但我想要一个更动态的情况）有什么建议吗？用检查器查看 DOM，部分问题在于类为 v-input__control 的内部 div 元素没有使用父 div 的完整宽度。将这一元素设置为 width: 100% 将会有所帮助。 <style scoped> .v-select :deep(.v-input__control) { width: 100%; } </style> 另一个问题是为输入详细信息元素保留了一些空间如果你想利用这个空间，你需要去掉这个元素。这实际上可以通过道具 hide-details 来完成隐藏提示和验证错误。设置为自动消息时，仅当有消息（提示、错误消息、计数器值等）要显示时才会呈现。像这样添加道具： <v-select class="d-flex align-center" label="Items per page" density="comfortable" :model-value="itemsPerPage" :items="['5', '10', '25', '100']" variant="outlined" @update:model-value="itemsPerPage = parseInt($event, 10)" style="max-width: 150px" hide-details ></v-select> 这应该能达到你想要的外观。更新了 Vuetify Playground

html css vue.js vuetifyjs3

回答 1 投票 0

Vuetify 3，使用flex时，宽度被忽略

使用 vuetify 3，我尝试为表格设置自定义分页。一切进展顺利，除了使用 flex 忽略了宽度 ... 使用vuetify 3，我尝试为表格设置自定义分页。一切进展顺利，除了 <v-select> 使用 width 忽略了 flex <template> <v-app> <v-row class="mt-2"> <v-col cols="12" sm="12"> <div class="d-flex flex-wrap ga-3 justify-end">  <v-select class="d-flex align-center" label="Items per page" density="comfortable" :model-value="itemsPerPage" :items="['5', '10', '25', '100']" variant="outlined" @update:model-value="itemsPerPage = parseInt($event,10)" style="max-width: 150px" ></v-select> <p class="d-flex align-center"> {{ page * itemsPerPage - itemsPerPage + 1 }} - {{ page * itemsPerPage }} of {{ total }} </p>  <v-pagination class="d-flex align-center" density="comfortable" rounded="circle" v-model="page" :length="pageCount" :total-visible="6" ></v-pagination> </div> </v-col> </v-row> </v-app> </template> 还有脚本部分（只是为了ref，仅此而已） <script setup> import { ref } from 'vue' const page = ref(1) const itemsPerPage = ref(10) const total = ref(150) const pageCount = ref(10) </script> 如果您观看<v-select>，您可以看到有一个style="max-width: 150px"完全被忽略（主要是由于class="d-flex align-center"，但我不知道如何使其协同工作）。这里是 Vuetify Playground，可以通过实时片段更好地理解我的意思。编辑：第一张图片是现在的样子这就是我想要的select的样子（加上中心对齐，我无法设置，除了使用边距或填充，但我想要一个更动态的情况）有什么建议吗？用检查器查看 DOM，部分问题在于类为 v-input__control 的内部 div 元素没有使用父 div 的完整宽度。将这一元素设置为 width: 100% 将会有所帮助。 <style scoped> .v-select :deep(.v-input__control) { width: 100%; } </style> 另一个问题是为输入详细信息元素保留了一些空间如果你想利用这个空间，你需要去掉这个元素。这实际上可以通过道具 hide-details 来完成隐藏提示和验证错误。设置为自动消息时，仅当有消息（提示、错误消息、计数器值等）要显示时才会呈现。像这样添加道具： <v-select class="d-flex align-center" label="Items per page" density="comfortable" :model-value="itemsPerPage" :items="['5', '10', '25', '100']" variant="outlined" @update:model-value="itemsPerPage = parseInt($event, 10)" style="max-width: 150px" hide-details ></v-select> 这应该能达到你想要的外观。更新了 Vuetify Playground

html css vue.js vuetifyjs3

回答 1 投票 0

Vue Multiselect 禁用时屏幕阅读器无法访问

我正在使用 Vue 和多选来获得国家/地区下拉列表。当下拉列表预先填充了某些值并被禁用时，就会出现问题。我有一个要求，这个值应该仍然是

vue.js accessibility vue-multiselect

回答 1 投票 0

如何将 v-if 与 HTTP 请求结合使用 - vue.js

我试图用 v-if 隐藏导航栏中的一个元素。我将获取的布尔值保存在本地存储中。这是我第一次使用 Vue，过去 2 天我一直在用这个，找不到重新...

vue.js

回答 1 投票 0

Vuex 与 TypeScript 映射函数

我的状态（游戏命名空间）有一个接口，如下所示：接口游戏状态{ 选定的选项卡：数字；超时：数量；小吃栏：布尔值；文本：字符串；完成任务：nu...