laravel-vue 相关问题


Laravel 和 Vue Js 应用程序中的脚本无法使用响应正文(原因:CORS 缺少允许来源)

开发 Laravel 10 + Vue Js 3 应用程序两个项目文件是分开的。我也有以下 api.php 登录路线 路线::post('/login', [LoginController::class, '提交']); 并使用


Inertia.js 和 Laravel - 视图如何自动接收 auth::user() 对象?

我目前正在开发 Laravel 8 项目,第一次尝试将提供的 Laravel Breeze 脚手架与 Inertia.js 和 Vue 一起使用。在最初的仪表板脚手架中,仪表板...


如何在 vitest 中测试 laravel sainttum 路线

我有一个应用程序,使用 Vue 框架作为客户端,使用 laravel 框架作为服务器。 我的身份验证是通过 laravel sainttum 完成的,这是一个基于 cookie 的身份验证系统。 我当前的设置...


Vue js & laravel 后端编辑发票

编辑: 我正在从发票项目中获取这些数组,其中产品与发票 ID 相匹配 [ { “ID”:27, “发票 ID”:14, “产品id”:1, ...


Tailwind 缺少很多款式

我使用 Laravel Breeze 以 Vue 为基础构建了一个新网站。现在发现 Tailwind 文档中定义的内容缺少很多类。 编辑:为了澄清这些是我尝试过的课程...


更新和访问Vue组件之间的警报消息变量

我正在使用 VueJS 和 Laravel 6.0。我想要实现的是创建全局变量alertStatus和alertMsg,以便每次进行AJAX调用时,全局变量都可以


dockerizing Laravel + vue。我遇到数据库连接问题 SQLSTATE[HY000] [2006] MySQL 服务器已消失

这是我的 docker.yml 文件 服务: 网址: 图片:应用程序名称:最新 建造: 目标:网络 语境: 。 环境文件: -.env 端口: - “8000:80” 卷: ...


无法加载/vercel/path0/vendor/tightenco/ziggy/dist/vue.es.js

您好,我在尝试在 vercel 上部署我的 Laravel、Inertia、Vite、Vue 应用程序时遇到问题。 我在本地主机中测试我的应用程序没有错误,一切正常...... Vercel 安装打印此错误: [回复:...


在 HTTPS 中运行 Visual Studio 默认 Vue 项目

我使用默认的 Vue 项目模板在 Visual Studio 2019 中创建了一个标准的 Vue 应用程序。我使用的是 Windows 10。这将创建一个可以使用 Vue CLI 启动的简单项目。这...


如何在 laravel 10 中使用 Laravel-mix

似乎无法配置 laravel-mix 包。 嘿,我想在 laravel 10 中使用 laravel-mix 包,但我似乎无法正确配置它,因为当我运行 npx mix 时,我不断收到错误...


防止 HTML <dialog> 用 Vue 关闭

我正在尝试使用 Vue 以编程方式阻止 HTML 对话框元素的关闭事件关闭对话框。这是我正在使用的代码: 从“vue”导入{ref}; const 对话框模板Re...


Vite+Vue 页面不需要的 CSS 样式

在Vite-Vue应用程序中,我实现了index.html和vue组件/视图的样式,但浏览器将它们显示为被划掉。 AMany =我在组件/视图中添加的样式也是 cro...


vue-router useRouter 在构建库组件时不起作用

我正在构建一个 Vue3 npm 组件库,希望我可以使用 vue-router 的 useRouter 访问当前路由器,并且它将由导入我的任何 vue 应用程序自动提供


Vue 2.0 + webpack 使用 npm 包中的组件

我正在尝试使用 webpack 和 Vue 2.0 设置一个项目,但在我的项目中使用 npm 包(如 vue-parallax)中的组件时遇到了一些麻烦。 我安装了该软件包并且一切...


Quasar Vue Router 解析名为route的href

我正在尝试使用 vue router 构建 href 链接 我在routes.js中有以下内容 常量路由 = [ { 小路: ”/”, 组件:() => import("layouts/MainLayout.vue")...


Laravel Inertia VueJs 的本地化

我正在尝试在 Laravel Inerita (Vue.js) 上设置本地化。我知道 https://github.com/mcamara/laravel-localization,但这不支持 Inertia(至少我没有成功


Composer 版本匹配错误 laravel + spatie medialibrary

我尝试通过 laravel 安装程序使用 laravel new 创建一个新的 laravel 应用程序。 这工作没有问题。当我尝试安装 spatie/medialibrary 时,我收到以下错误...


Pinia 对象在 Vue 中的 foreach 后失去反应性

我有这个嵌套的foreach BalanceItemList.vue ... 我有这个嵌套的 foreach BalanceItemList.vue <template> <div v-for="category in categoryItemsStore.balanceCategories" :key="category.id" class="mt-5"> <div class="border-black border-b bg-gray-200"> <span class="font-bold w-full">{{ category.name }}</span> </div> <div v-for="balanceItem in category.balance_items" :key="balanceItem.id"> {{ balanceItem.total = 500 }} <balance-item :balance-item="balanceItem" @update-balance-item="update"/> </div> <div> <balance-item-create :category="category.id" @create-balance-item="update"/> </div> <div v-if="categoryItemsStore.totals[category.id]" class="grid grid-cols-4-b t-2 ml-2"> <div :class="category.is_positive ? '': 'text-red-600' " class="col-start-4 border-t-2 border-black font-bold"> &euro;{{ categoryItemsStore.totals[category.id].total }} </div> </div> </div> </template> 我像这样检查了“balanceItem”的反应性 {{ balanceItem.total = 500 }} 它在商店中更新,但随后我有了我的平衡项目组件: BalanceItem.vue <script setup> import {reactive} from "vue"; import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = reactive(props.balanceItem); const form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { props.balanceItem.total = 500 categoryItemStore.updateBalanceItemsTotals(form) emit('update-balance-item') } }) } </script> <template> <form @submit.prevent="submit"> <div class="grid grid-cols-4-b"> <span>{{ item.name }}</span> <NumberInput v-model="form.count" autofocus class=" mr-4 mt-1 block" type="number" @update:model-value="submit" /> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1">&euro;</div> <NumberInput v-model="form.amount" :class="form.errors.amount ? 'border-red-600' : ''" autofocus class="mt-1 mr-4 w-5/6" type="text" @update:model-value="submit" /> </div> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1 w-5/6">&euro;</div> <NumberInput v-model="form.total" autofocus class="mt-1 block" disabled style="max-width: 95%" type="text" /> </div> </div> </form> </template> 这是我测试反应性的商店。如果我增加输入的数字,则项目的计数保持不变 UseCategoryItemsStore.js import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } function updateBalanceItemsTotals(selectedItem) { balanceCategories.value.forEach((category) => { category.balance_items.forEach((item) => { if (item.id === selectedItem.id) { // item.total = item.count * item.amount console.log(item) } }) }) } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals} }) 在此测试中,我执行“props.balanceItem.total = 500”。但如果我检查商店,它不会更新。看来将“balanceItem”分配给一个道具会失去与我的 Pinia 商店的反应性。我可以使用“form.total = form.count * form.amount”手动更新我的表单,但这对我来说似乎很老套,我想使用 Pinia 商店的反应性。我考虑过根据“BalanceItem”获取 Pina 项目,但这似乎也很棘手。谁知道为什么失去反应性? 我有laravel 10.39、vue3.2.41和pinia 2.1.17惯性0.6.11。到目前为止我知道的所有最新版本。 我像这样更新我的表格和商店: <script setup> import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = categoryItemStore.getItemById(props.balanceItem); let form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { item = categoryItemStore.updateItem(form) form = useForm(item) emit('update-balance-item') } }) } </script> 我将此功能添加到我的商店: import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getItemById(item) { let category = balanceCategories.value.find((category) => { return category.id === item.item_category_id }) return category.balance_items.find((item_from_store) => { return item_from_store.id === item.id }) } function updateItem(form) { const item = getItemById(form) item.count = form.count item.amount = form.amount item.total = item.count * item.amount return item } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, getItemById, updateItem} }) 假设如果帖子获得 200,我的表单值可用于更新商店和更新表单。这是我能想到的最好的


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

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


Vue 3 - 如何使用 typescript 将组件包装在 Vue 中

我正在尝试包装 PrimeVue 组件(日历),稍微更改其样式,然后再次导出。 反应中类似以下内容: const WrappedCalendar: React.FC = (...


Vue 3 简单的包罗万象的后备路由在服务器上不起作用

我使用 Vue router 4 创建了一个新的 Vue 3 应用程序。 当我通过 访问链接时,它会打开页面,但是当我直接打开链接时,它会显示未找到错误。 { 不是芙...


在计算警告中使用 vue-i18n.t()

升级我的项目后,每次尝试在计算变量中使用 VueI18n.t() 时,我都会收到此警告: [Vue warn]:在计算的 getter 内部调用 getCurrentInstance()。这是inco...


Vue SFC 模板生成构建错误

Vue.js 完全新手。 我正在关注 Kirby CMS 团队制作的教程。 Vue 正在使用 [email protected] 进行构建,作为 KirbyUp 捆绑器的一部分。 所以,我可以在


如何使用Websocket从FastAPI(后端)返回JSON到Vue(前端)?

我有一个应用程序,前端是用Vue实现的,后端使用FastAPI框架。通信是通过websocket实现的。 目前,前端允许用户


如何使 Vue 2 提供/注入 API 响应式?

我按如下方式设置代码,并且能够从 SomeComponent.vue 中的 setter 更新 App.vue 中的 checkout_info,但 SomeComponent.vue 中的 getter 不是响应式的。 // 应用程序.vue 导出默认值 {...


如何使用Vue Router的相对重定向(不起作用)?

我正在从 Vue router Doc 学习相对重定向。 我正在尝试实现代码的文档示例。 常量路由 = [ { // 始终将 /users/123/posts 重定向到 /users/123/prof...


Vue.js:为什么 $el 返回文本节点

我有以下代码: 导出默认类自定义扩展 Vue { 安装(){ console.log(this.$el); ...


“拒绝应用 {link} 中的样式,因为其 MIME 类型不受支持且启用了严格的 MIME 检查。”在 Vue+Vuetify 应用程序中

我使用 vue-create-app 创建了一个 Vue+Vuetify 项目。在我的本地系统中,Vuetify 工作正常,但在 Gitlab 实时服务器上不起作用。并在实时应用程序中显示此错误消息: “拒绝应用...


Laravel 10 Vite“npm run build”创建空文件

由于某种原因,运行该命令时,某些脚本会编译,而某些脚本的内容会被“删除”。这是我的 vite.config.js 文件: 从“laravel-vite-plugin”导入 laravel; 导入vu...


渲染对象列表时“无法读取未定义的属性”

我试图在 Vue 3 中按名称渲染对象列表,但我不断收到“无法读取未定义的属性(读取“名称”)”错误。 我对 Vue 还是新手,我不知道......


Cloudfoundry Laravel“无法打开输入文件:artisan”

我正在尝试使用 CF CLI 推送 Laravel 应用程序。 我创建了一个新的 Laravel 应用程序(manifest.yml)并尝试部署它,但收到错误“无法打开输入文件:artisan”...


如何在 Laravel 项目中使用 DD() 方法?

我需要知道如何在 Laravel 项目中正确使用 dd() 函数。 例如 - 我有任务来调试我的项目(PHP /Laravel)中的一些代码和功能,这总是需要我


禁用 Laravel 调试器

我有一个不是我开发的 Laravel 应用程序。每个页面的底部都有一些奇怪的栏,它是某种类型的 Laravel 调试器工具。 我相信它存储在存储/调试器中。是


Laravel webhook 客户端在 Whatsapp Webhook url 上出现错误 405

我尝试在whatsapp云中使用laravel进行webhook,但它显示此错误 脸书错误 并在 ngrok 中显示此错误 恩格罗克错误 我使用 https://github.com/spatie/laravel-webhook-client


Vue 3,组合 API:“排除”TypeScript 实用程序类型导致道具验证错误

我正在使用 Vue 3 以及 Composition API 和 TypeScript,一切都是最新的稳定版本。 假设我有以下类型: 导出接口人{ 名称:字符串; } 导出类型统计...


如何在vue-i18n中使用@等特殊字符?

我正在使用 vue-i18n 来本地化我的表单。我有一个电子邮件字段,其中有一个占位符,其中包含一个包含 @ 符号的示例电子邮件地址。 emailPlaceholder:'例如:[email protected]'


Laravel 9 突变冒号

在 Laravel 9 中,变异器有不同的实现。以下示例来自官方文档。 受保护函数firstName():属性 { 返回属性::make( ...


将 Laravel 的 .env 文件复制到 Docker 容器中

设置 我正在 Ubuntu 服务器上运行 Docker,并尝试创建一个 Laravel 容器来使用 artisan 运行我的网站。 Laravel 项目位于 GitHub 存储库内,我将该项目克隆到...


如何在 Livewire 中检查应用于电子邮件地址的验证?

我有一个 Laravel 应用程序,已从 Laravel 10 升级到 Laravel 11。它位于 Alpine/Docker 容器中。我最初使用 artisan 服务系统作为 Web 服务器,但由于


Laravel Passport 登录无法使用 Jetstream Inertia 正确重定向

我已经用 Laravel Passport 实现了一个 OAuth 系统,但是该系统的登录和所有身份验证都是由 Laravel Jetstream 和 Inertia 处理的。 当我想请求代码时(使用


为什么从其他文件导入的 SCSS 变量在 Vue 3 中不起作用?

我在我的vue 3项目中安装了sass loader,但问题是我想从另一个文件导入变量,但不起作用 我的架构是: 源代码 资产 CSS 样式.scss


在哪里使用 dd() 函数来调试 Laravel 应用程序?

我需要知道如何在 Laravel 项目中正确使用 dd() 函数。 例如 - 我有任务来调试我的项目(PHP /Laravel)中的一些代码和功能,这总是需要我


为什么我在 Vue 开发工具中看不到 Pinia?

我正在使用 Vue 3、Vuetify 3 和 Pinia 开发一个应用程序,所有这些我都在学习过程中。我正在尝试按照这个视频来学习 Pinia,大约 17:50,演示者说要安装...


Vue/Nuxt:如何让组件真正动态?

为了使用动态定义的单页面组件,我们使用组件标签,因此: ... 从 '@/


Laravel 测试assertSessionDoesntHaveErrors() 没有发现错误?

我想在 Laravel 测试中断言两件事: 对象已成功更改(例如,assertSee('New value')) 会话中没有错误(例如,assertSessionDoesntHaveErrors())


如何在 Vercel 中使用 Vue 前端部署 Express 应用程序?

我将 Vue 应用程序构建到名为 dist 的文件夹中。 我有用 Node Express 编写的后端 API。 当我在 Vercel 上部署它时,出现 404 错误。 这是我的应用程序结构和 Vercel 设置...


在门户上部署Vue应用程序后出错。Azure

我创建了我的 Vue-Vite 应用程序。然后我在 dev.azure - Web App 上创建了存储库。接下来我将其部署在portal.azure.com 上。修复了一些错误后,我仍然不知道如何修复此错误: 主要....


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

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


部署后的 Laravel 护照

我在 aws ec2 实例上运行 laravel 应用程序,并使用 laravel 护照通过不记名令牌来保护我的 api。 每次部署后,护照密钥都消失了,所以我在...之后添加了护照:安装命令


如何为我的多组件 Vue 3/Vuetify 3 应用程序中的每个组件提供一个常量?

我有一个用 Vue 3 和 Vuetify 3 编写的应用程序。它有多个组件,所有组件都显示货币金额。我希望货币金额以适合的格式显示...


© www.soinside.com 2019 - 2024. All rights reserved.