vue.js 相关问题

后端运行时用axios访问api有问题吗？

api.js:14 GET http://localhost:8080/api/todos/todos net::ERR_FAILED 500（内部服务器错误） [email protected]:[email protected]:[email protected]:[email protected]:159r...

为什么vue3在没有深度嵌套的情况下不重新渲染反应变量的引用

我正在尝试了解 vue3 中的 Composition-API Reactivity。我想构建一个搜索栏，它将立即向我显示模板中的结果。 为此，我有一个反应变量搜索...

如何通过 typescript 在 Vue2 中使用带有组合 api 的 vue 类组件

从 'vue-property-decorator' 导入 { Component, Vue } 从 '@/composables/customerRepository' 导入 { CustomerContext, getCustomerRepository } @成分 出口</desc> <question vote="7"> <pre><code>&lt;script lang=&#34;ts&#34;&gt; import { Component, Vue } from &#39;vue-property-decorator&#39; import { CustomerContext, getCustomerRepository } from &#39;@/composables/customerRepository&#39; @Component export default class CustomerList extends Vue { search = &#39;&#39; setup(): CustomerContext { const ctx = getCustomerRepository() return ctx } } &lt;/script&gt; </code></pre> <p>在 Vue 2 中，我想通过 TypeScript 将 Composition API 与类组件样式一起使用，但我不确定语法是否正确。此外，<pre><code>setup()</code></pre>函数不会自动调用。</p> <p><pre><code>vue-class-component</code></pre>可以在 TypeScript 中使用 Compostion API 吗？</p> </question> <answer tick="true" vote="21"> <h3>Vue 2</h3> <p>首先，确保您已经安装了 Vue 2 的 <a href="https://www.npmjs.com/package/@vue/composition-api" rel="noreferrer"><pre><code>@vue/composition-api</code></pre></a> 插件：</p> <pre><code>// main.ts import Vue from &#39;vue&#39; import VueCompositionApi from &#39;@vue/composition-api&#39; Vue.use(VueCompositionApi) </code></pre> <p>然后将 <pre><code>setup()</code></pre> 定义为 <pre><code>@Component</code></pre> 选项（而不是类方法）：</p> <pre><code>// MyComponent.vue @Component({ setup(props, context) { //... } }) export default class CustomerList extends Vue { //... } </code></pre> <h3>Vue 3</h3> <p>对于 Vue 3，<pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="a4d2d1c189c7c8c5d7d789c7cbc9d4cbcac1cad0e49c8adc">[email protected]</a></code></pre> 导出一个 <pre><code>setup()</code></pre> API，您可以将其分配给局部变量：</p> <pre><code>&lt;template&gt; &lt;div&gt;counter: {{myContext.counter}}&lt;/div&gt; &lt;button @click=&#34;myContext.increment&#34;&gt;Increment&lt;/button&gt; &lt;/template&gt; &lt;script lang=&#34;ts&#34;&gt; import { Vue, setup } from &#39;vue-class-component&#39; import { ref } from &#39;vue&#39; export default class MyComponent extends Vue { myContext = setup(() =&gt; { const counter = ref(0) return { counter, increment() { counter.value++ } } }) } &lt;/script&gt; </code></pre> <p><em><strong>注意：</strong> 从 <pre><code><a href="/cdn-cgi/l/email-protection" data-cfemail="f1878494dc929d908282dc929e9c819e9f949f85b1c9dfc1dfc1dc8392dfc0">[email protected]</a></code></pre> 开始，<pre><code>setup()</code></pre> 不接收任何参数，包括来自选项 API<a href="https://v3.vuejs.org/guide/composition-api-setup.html#arguments" rel="noreferrer"> 中使用的 <pre><code>context</code></pre> 的 <pre></pre><code>props</code><pre> 和 </pre><code>setup()</code></a> 参数。</em></p> </answer> <answer tick="false" vote="0"> <p>使用class来编写setup，支持vue2和vue3</p> <pre><code>&lt;template&gt; &lt;p&gt;{{ count.text }}&lt;/p&gt; &lt;/template&gt; &lt;script lang=&#34;ts&#34;&gt; import { defineComponent } from &#39;vue&#39;; import { Setup, Hook } from &#39;vue-class-setup&#39;; @Setup class Count { public value = 0; public get text() { return String(this.value); } @Hook(&#39;mounted&#39;) public init() { this.value++; } } export default defineComponent({ setup() { return { count: new Count() } } }) &lt;/script&gt; </code></pre> <p><a href="https://github.com/fmfe/vue-class-setup" rel="nofollow noreferrer">https://github.com/fmfe/vue-class-setup</a></p> </answer> <answer tick="false" vote="0"> <pre><code>import ClassComponent from &#39;vue-class-component&#39; ClassComponent.registerHooks([&#39;setup&#39;]) </code></pre> <p>将其放在项目的开头，然后一切都会按您的预期进行</p> </answer> </body></html>

在 Laravel Jetstream + Inertia 中重定向到同一页面时不显示 Flash 消息

我在使用 Inertia.js 在 Laravel Jetstream 应用程序中显示 Flash 消息时遇到问题。这是相关代码： 在 AppLayout.vue 中 从 &qu... 导入 { usePage } </desc> <question vote="0"> <p>我在使用 Inertia.js 在 Laravel Jetstream 应用程序中显示 Flash 消息时遇到问题。这是相关代码： 在AppLayout.vue中</p> <pre><code>&lt;script setup&gt; import { usePage } from &#34;@inertiajs/vue3&#34;; import FlashMessage from &#34;../Components/FlashMessage.vue&#34;; import { ref, computed, onMounted } from &#34;vue&#34;; const { props: pageProps } = usePage(); const flashMessage = ref(&#34;&#34;); const successMessage = computed(() =&gt; pageProps.flash.success); onMounted(() =&gt; { if (successMessage.value) { flashMessage.value = successMessage.value; } }); &lt;/script&gt; &lt;div class=&#34;bg-white w-full shadow relative lg:fixed lg:top-0 z-50&#34;&gt; &lt;FlashMessage :success=&#34;flashMessage&#34; /&gt; &lt;/div&gt; </code></pre> <p>在handleInertiaRequest方法中：</p> <pre><code>public function share(Request $request): array { return array_merge(parent::share($request), [ &#39;flash&#39; =&gt; function () use ($request) { return [ &#39;success&#39; =&gt; $request-&gt;session()-&gt;get(&#39;success&#39;), &#39;error&#39; =&gt; $request-&gt;session()-&gt;get(&#39;error&#39;), ]; }, ]); } </code></pre> <p>在类控制器中：</p> <pre><code>public function destroy($id) { $clase = Clase::find($id); $clase-&gt;delete(); return redirect()-&gt;back()-&gt;with(&#39;success&#39;, &#39;Clase Eliminada Exitosamente&#39;); } </code></pre> <p>一切似乎都工作正常，除非闪存消息被重定向到同一页面。变量 pageProps 似乎没有捕获该消息，即使该消息肯定已被接收，因为当我打印 {{$page.props.flash.success}} 时，它会显示在屏幕上。</p> <p>什么可能导致此问题？任何帮助将不胜感激！</p> </question> <answer tick="false" vote="0"> <p>我们能看到前端的请求吗？ 如果您使用了<pre><code>only</code></pre>，您也必须请求<pre><code>flash</code></pre>。</p> </answer> </body></html>

自定义组件上的 VUE 3 转换由于某种原因无法正常工作

所以我用 Vue 3 制作一个网络应用程序，在菜单中，每个菜单按钮都会加载一个组件。 我的意图是每次组件加载时都应该有一个转换，问题是，它似乎不是......

如何在开发模式下运行`ionic build`？

我正在使用带有 Vuejs 的 Ionic Framework v5（使用 ionic start 创建）。 它以生产模式构建，但我想以开发模式构建。 我用 ionic build 构建，它输出： > vue-cli-se...

如何将布尔值从 Blade 传递到 Vue 组件 Laravel 7？

我正在尝试在 Vue 组件中实现带有 true/false 或 1/0 的 IF 条件。我浏览了一些之前提出的问题，但无法得到它。请帮帮我。 IF 条件未给出真实输出...

如果管理员稍后需要插件/主题/视图添加/修改等，使用 React/Vue 作为无头 WordPress CMS 的前端是否可行？

我有一个使用 Elementor 插件的 WordPress 网站。有计划使用 React/Vue 转向更加动态的交互式前端。虽然我对前端框架有很好的掌握，但我......

如何使用 v-model 绑定解码 HTML 实体‽

未被充分利用且相当不为人知的interrobang（‽，实体‽）需要重新流行起来！但 Vue 不允许我将它与我的 v-model 一起使用。 数据 （） { 返回 { list_name: '名称&a...

Vue 指令：用组件动态替换元素 - 事件监听器不起作用

我正在开发一个 Vue 3 项目，我需要用自定义 Vue 组件 (CustomButton) 动态替换包含特定属性 (data-button) 的锚元素。为了实现这一目标，我...

为什么 Inertia 渲染在 Firefox 上不起作用？

我用Laravel和Inertia Js做了一个网站，但是当它在生产中时，它在浏览时不会渲染组件，只有直接从url输入时才渲染。 使用

Vue 组件：如何将数据从父级传递给子级

我如何从我的医生组件访问医生属性？ Vue.component('专家', { 模板：` &r... 如何从我的医生组件访问医生属性？ Vue.component('specialists', { template: ` <div> <div class="list-group-item title"> &raquo; {{ name }} </div> <doctor class="list-group-item" v-for="doctor in doctors"> <a href="#" class="list-group-item-heading"> {{ doctor.full_name }} </a> </doctor> </div> `, props: { name: { default: '', }, }, data: function() { return { algoliaClient: null, algoliaIndex: null, doctors: [], }; }, created: function() { this.algoliaClient = this.$parent.algoliaClient; this.algoliaIndex = this.algoliaClient.initIndex('medical_doctors'); }, mounted: function() { this.getDoctors(); }, methods: { getDoctors: function() { this.search(this.name); }, search: function(input) { var _this = this; this.algoliaIndex.search(this.name, function(err, hits) { _this.setDoctors(hits.hits); }); }, setDoctors: function(data) { this.doctors = data; }, }, }); // my doctor component Vue.component('doctor', { template: ` <div><slot></slot></div> `, data: function() { return { doctor: null, // here. how can i pass value to it? }; }, }); 如何从我的专家组件访问医生属性？ 我尝试从专家组件访问 this.$children 但孩子为空 sdfqsdfqsd qsdf qsdfqsdfqsdfqsdfqsdfqs qsdfqsdf

MacOS/ARM64 为 Linux/AMD64 构建 vite 项目卡住了

我有一个带有 vite (5) 和 vitejsvue 插件 (5.0.3) 的 vue.js (3.2) 项目。我想在 MacOS/ARM64 上的 docker 中为 Linux/AMD64 服务器构建它。如屏幕截图所示，构建工作正常，但它保持...

I18n 模块不适用于 nuxt3 版本 3.11.2

我按照 nuxt3 I18n 模块的说明进行操作。 我按照文档中提到的方式实现了合并 2 - 结果出现，但消息中写入的文字未出现 一些

在 Vue 3 中，我应该在初始化反应值时设置整个对象结构吗？

假设我想在我的 pinia 存储中创建一个空值，用于保存用户正在查看的当前订阅模型。如果用户当前没有订阅，则该值应该为 null/未设置...

Vite是否可以使用自己的对象内容创建manifest.json（或文件）？

有没有办法在构建时通过 Vite 创建 manifest.json 或其他 json 文件，其中包含我自己的对象以及带有哈希的索引 js 和 css 的路径？例如： { jsScript: '路径/到/脚本/[na...

使用 vue app for azure 时出现 uninitialized_public_client_application 错误

我正在尝试从 Azure 获取访问令牌，但在运行代码时遇到错误： BrowserAuthError：uninitialized_public_client_application：您必须调用并等待初始化...

@update：Vuetify3 中的分页？

<template> <v-app> <v-container> <div class="search-section"> <div class="search-fields"> <v-text-field v-model="search" label="ФИО"></v-text-field> <v-text-field v-model="birthdateSearch" label="Дата рождения"></v-text-field> <v-text-field v-model="studyUidSearch" label="UUID исследования"></v-text-field> <v-text-field v-model="studyDateSearch" label="Дата исследования"></v-text-field> <v-text-field v-model="modalitySearch" label="Модальность"></v-text-field> </div> </div> <v-data-table :items="filteredItems" multi-sort :loading="loading" @update:pagination="updatePagination"> <template v-for="header in headers" v-slot:[`header.${header.value}`] :key="header.value"> <span>{{ header.text }}</span> </template> </v-data-table> </v-container> </v-app> </template> <script setup> const updatePagination = async () => { console.log("hello im here"); }; </script> 我正在制作一个网络应用程序并尝试通过分页实现大数据搜索，我想在下一页事件上显示接下来的 100 条记录，但似乎 @update:pagination 在 vuetify 3 中不起作用，有类似的吗？ v-data-table没有这个活动。您需要手动分页，可以使用这种方式： <template> <v-data-table :items="consoles" :items-per-page="pageSize" @update:items-per-page="onPageSizeChange" :page="pageNow" @update:page="onPageNowChange"> <template v-slot:item.exclusive="{ item }"> <v-checkbox v-model="item.exclusive" readonly></v-checkbox> </template> </v-data-table> </template> <script setup> import { ref } from 'vue' const consoles = ref([ { name: 'PlayStation 5', manufacturer: 'Sony', year: 2020, sales: '10M', exclusive: true, }, { name: 'Xbox Series X', manufacturer: 'Microsoft', year: 2020, sales: '6.5M', exclusive: false, }, { name: 'Nintendo Switch', manufacturer: 'Nintendo', year: 2017, sales: '89M', exclusive: true, }, { name: 'PlayStation 4', manufacturer: 'Sony', year: 2013, sales: '116M', exclusive: true, }, { name: 'Xbox One', manufacturer: 'Microsoft', year: 2013, sales: '50M', exclusive: false, }, { name: 'Nintendo Wii', manufacturer: 'Nintendo', year: 2006, sales: '101M', exclusive: true, }, ]) const pageSize = ref(2) const onPageSizeChange = (rowsPerPage) => { console.log('Page size changed to:', rowsPerPage) pageSize.value = rowsPerPage } const pageNow = ref(1) const onPageNowChange = (page) => { console.log('Page changed to:', page) pageNow.value = page } </script>

Vuetify3 图标在开发/构建后不显示

在 build/dev ("dev": "vue-cli-service build --dest=../static/ --mode=development --watch") 命令生成后，我使用 Vue 和 Vuetify 构建我的应用程序文件转到静态目录

当我能够在 laravel sactum 中生成令牌时却未经身份验证

大家好，我有这个项目 laravel v.10 后端和 vue CLI 前端。我使用 laravel sactum 进行身份验证。 现在我的问题是，如果我想进入这条路线，我会得到 {"message":"