这篇文章主要介绍laravel-admin与vue结合怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联建站于2013年成立，先为南开等服务建站，南开等地企业，进行企业商务咨询服务。为南开企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
由于 Laravel-admin 采用的是 pjax 的方式刷新页面，意味着很多页面刷新的操作，并不是刷新整个 document，而是从服务器拿到部分 document，再通过类似 $(“#pjax-container”).html(newPart) 的方式更新的。
这就造成一个问题，每次 pjax 刷新，都会破坏 vue 的 dom 映射。
所以理论上有2种方法解决：
重新绑定一下 vue 的映射关系
在某些页面禁止 pjax
1 太难搞，而且没啥资料，放弃。2 的话比较可行。
部分禁止 pjax
打开 public/vendor/laravel-admin/laravel-admin/laravel-admin.js
添加代码：
// 不使用 pjax 刷新的页面
$(document).on('pjax:beforeReplace', function (e, options) {
// console.log(arguments)
var freshPaths = [
/\/admin.*\/products/,
]
for (let path of freshPaths) {
if (path.test) {
if (path.test(e.state.url)) {
location.reload()
return false
}
}
else if (options.url.search(path) !== -1) {
location.reload()
return false
}
}
})使用自定义 view
很多时候我们并不需要大动干戈地建立一个全部的 view，只需要在内置 view 中稍作修改。
这时候，我们需要先自定义一个 Content 类：
use Encore\Admin\Layout\Content;
class MyContent extends Content {
public function render() {
$items = [
'header' => $this->header,
'description' => $this->description,
'breadcrumb' => $this->breadcrumb,
'content' => $this->build(),
];
return view('admin.content', $items)->render();
}
}然后引用它：
public function index(MyContent $content) {
return $content
->header('product')
->description($this->brand)
->body($this->grid());
} 这样一来，每次进入到 index 页面，都会渲染 admin.content 这个 view 。
view 的内容直接 copy 自 vendor/encore/laravel-admin/resources/views/content.blade.php
在 view 里插入 vue 组件
添加2部分代码即可。
第一部分是初始化 vue app：
// boot up the demo
$(function () {
// vapp
window.vapp = new Vue({
el: '#app',
data () {
return {
status: {
showGalleryEditor: false,
},
store: {
images: [],
el: '',
},
}
},
components: {},
methods: {
startGalleryEditing (event) {
this.status.showGalleryEditor = true
this.store.pk = $(event.target).parent().find('ul').data('pk')
this.store.images = $(event.target).parent().find('img').toArray().map((e) => e.getAttribute('src'))
window.p = $(event.target).parent().find('ul')
},
},
})
})
第2部分是插入组件：
vue 组件单独一个 js 文件
位置如下：
public/vendor/components/gallery-editor.js
定义如下：
Vue.component('gallery-editor', {
props: {
status: {
showGalleryEditor: false,
},
images: [],
pk: 0,
moveTo: [],
},
data () {
return {}
},
watch: {
images (newVal, oldVal) {
this.moveTo = []
for (let src of newVal) {
this.moveTo.push({
src: src,
productId: this.pk,
deleted: 0,
})
}
},
},
methods: {
close () {
this.status.showGalleryEditor = false
},
save () {
let args = {_token: LA.token}
args.id = this.pk
args.images = []
args.move_to = []
// console.log(JSON.stringify(this.moveTo))
for (let imgObj of this.moveTo) {
if (imgObj.deleted) {
continue
}
if (imgObj.productId === this.pk) {
args.images.push(imgObj.src)
} else {
args.move_to.push({src: imgObj.src, product_id: imgObj.productId})
}
}
// console.log(JSON.stringify(args))
$.post('/admin/products/move-images', args).done(() => {
toastr.success('success')
this.status.showGalleryEditor = false
}).fail((response) => {
toastr.error(response.responseText)
})
},
},
template: `
×
Editing images
