24
4
I am learning Vuejs (v3.2.36) in laravel framework (v10.22). I want to change the codes in the Vuejs file. The problem is that the project does not work. Vuejs files are as follows.
我正在学习在laravel框架(v10.22)中使用Vuejs(v3.2.36)。我想更改Vuejs文件中的代码。问题是，这个项目并不奏效。Vuejs文件如下所示。
/resources/js/app.js
/Resources/js/app.js
个人中心
文章发布
退出import './bootstrap';
import Router from '@/router'
import store from '@/store'
import { createApp } from 'vue/dist/vue.esm-bundler';
const app = createApp({})
app.use(Router)
app.use(store)
app.component("my-component", Router)
app.mount('#app')
/resources/js/router/index.js
/Resources/js/router/index.js
import { createWebHistory, createRouter } from 'vue-router'
import store from '@/store'
const routes = [
{
name: "home",
path: "/",
component: () => import('@/components/Home.vue'),
meta: {
title: `..Home..`,
middleware: "guest",
requiresAuth: false,
}
},
{
name: "login",
...
},
...
{
path: "/dashboard",
component: () => import('@/layouts/Default.vue'),
meta: {
middleware: "auth",
requiresAuth: true,
},
children: [
{
name: "dashboard",
path: "/dashboard",
component: () => import('@/components/Dashboard.vue'),
...
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes,
})
router.beforeEach((to, from, next) => {
document.title = to.meta.title
if (to.meta.middleware == "guest") {
if (store.state.auth.authenticated) {
if (to.meta.pageLogin) {
next({name: "dashboard"})
}
}
next()
} else {
if (store.state.auth.authenticated) {
next()
return;
}
next({ name: "login" })
}
})
export default router
/resources/js/layouts/Default.vue
/Resources/js/Layout/Default.vue
<template>
<div>
<nav>
LoGo
</nav>
<main>
<router-view></router-view>
</main>
</div>
</template>
<script>
import {mapActions} from 'vuex';
export default {
name:"default-layout",
components: {
},
data(){
return {
}
},
methods:{
...mapActions({
signOut:"auth/logout"
}),
async logout(){
await axios.post('/logout').then(({data})=>{
this.signOut()
this.$router.push({name:"login"})
})
}
}
}
</script>
/resources/js/components/Home.vue
/Resources/js/Components/Home.vue
<template>
<div>
This is Home page.
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name:"home",
data(){
return {
}
},
methods:{
}
}
</script>
/resources/js/components/Dashboard.vue
/Resources/js/Components/Dashboard.vue
<template>
<div>
This is Dashboard page.
</div>
</template>
<script>
export default {
name:"dashboard",
data(){
return {
}
},
mounted() {
axios.get('api/user/1').then( (res) => {
this.user = res.data
})
}
}
</script>
The app.blade.php file is as follows (laravel).
/resources/views/layouts/app.blade.php
App.blade.php文件如下所示(Laravel)。/Resources/Views/Layout/app.blade.php
<!DOCTYPE html>
...
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
</html>
Error:
错误：
[Vue warn]: Component is missing template or render function.
at <MyComponent>
at <App> runtime-core.esm-bundler.js:38:16
The error says the name MyComponent is not defined.
错误提示未定义名称MyComponent。
Just use inertiajs to do laravel with vue. even the official docs recommends it
只需使用inertiajs和vue来做laravel。即使是官方文件也建议
app.js
App.js
...
import { createApp,h } from 'vue'
const app = createApp({
render: ()=>h(App)
});
...
app.blade.php
App.blade.php
...
<body>
<div id="app"></div>
</body>
...
0
编辑:为了澄清，我想问的是:在什么情况下您会更喜欢一种语法而不是另一种语法？ 有什么区别: .trigger('change') 和 .change() 两者都按预期工作。在任何情况下语法都会有所不同
这个问题在这里已经有了答案: Difference between .on('click') vs .click() (12 个答案) 关闭 6 年前。 有什么区别: $('选择器').change
我用的是Select2-4.0.0 和 $gameSelect.select2().on("change",function(e){....} 工作正常。 但是当我将它链接起来时('change')就
有一天在#haskell 上，有人提到了当字符串改变时字符串的类型应该如何改变的概念。这让我想起了我项目中的一些代码。它一直困扰着我，我说不清为什么。我现在推测，原因是我没有实现这个概念。这是下面的代
我使用了 .on("change") 事件函数，因为我的整个代码中有一部分是动态变化的。 .trigger("change") 在 .change() 中工作正常，但在 .on("change") 中
下面是一个非常简单的表单下拉列表设置。但是，on-change 事件拒绝触发...除非它更改为 ng-change。 这让我卡住了大约一个小时，因为我们在网站的其他地方使用了相同的设置(即模型属性/列
我有两个v-model 案例一: 这很好用 案例二: 即使改变 u1 也会触发 onDateChange(); 最佳答案 :change 绑定(bind)属性，如 v-bind:change=
我找到了 .and方法对于链接许多期望非常有用。 expect { click_button 'Update Boilerplate' @boilerplate_original.reload
出于合规性原因，我需要捕获所有数据库更改。我知道 Change Feed 存储此信息(并且我正在等待完全保真度来捕获删除)。目前，我一直在通过 Function 触发器读取 Change Feed 并
我添加了一个data-ng-change='getSubjectsClasswise(classBean.class_id);'上课标签，但主题未在主题 处加载标签。 一切看起来都很好，没有遇到问题
我有一组复选框，当您单击其中一个时，它们应该全部被选中。 当用户单击一个复选框时，它会检查以该类名称开头的所有其他复选框。我想要的是用户单击一个复选框，并且每次单击仅触发一次 $(".atpSelec
我在 Stack Overflow 上阅读了很多有关此问题的内容，并应用了所有建议的解决方案(getShell pack、布局、getparent 布局等...)，但没有一个起作用。 我有一个带有文本
我想更改我的索引。我的数据框如下: partA = pd.DataFrame({'u1': 2, 'u2': 3, 'u3':4, 'u4':29, 'u5':4, 'u6':1, 'u7':323,
我有一个像这样的下拉菜单: Grade Year 旁边还有另一个下拉菜单: 3 4
这个问题已经有人问过，但我只停留在最基本的层面上。除了选择标记和尝试通过 jquery 捕获更改事件外，我没有向我的 html 添加任何内容。这是我的代码: $('#target').bin
我只是 Django 的新手几天。现在，当自定义表单中其他字段的值发生变化时，我需要同时更改一个字段中的值和表示形式。此时更改 MyModel 是受限。 我的应用程序/models.py: class
我正在使用 ListView 控件来显示一些数据行。有一个后台任务接收列表内容的外部更新。新收到的数据可能包含更少、更多或相同数量的项目，而且项目本身可能已更改。 ListView.ItemsSour
我在 android studio 中使用 git 插件。我的问题是当我提交更改列表(公开提交)时，但我在更改列表中的评论是错误的/丢失的，我想更改它。 问题: 有没有办法通过 AndroidStud
MyCustomObject * object=new MyCustomObject(); 假设我的许多类都使用了对象指针，但突然间我想在不更改地址的情况下更改指针的内容。 我认为 object =
我正在使用新的 KeyValue Observing。当变量发生变化时，我接到了我的观察者的电话，但 change struct 附带 newValue和 oldValue都为 nil ，所以它永远不
我是一名优秀的程序员,十分优秀！