這篇文章主要介紹laravel-admin與vue結(jié)合怎么用，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)建站于2013年成立，先為南開等服務(wù)建站，南開等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為南開企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

由于 Laravel-admin 采用的是 pjax 的方式刷新頁面，意味著很多頁面刷新的操作，并不是刷新整個(gè) document，而是從服務(wù)器拿到部分 document，再通過類似 $(“#pjax-container”).html(newPart) 的方式更新的。

這就造成一個(gè)問題，每次 pjax 刷新，都會(huì)破壞 vue 的 dom 映射。

所以理論上有2種方法解決：

重新綁定一下 vue 的映射關(guān)系

在某些頁面禁止 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

很多時(shí)候我們并不需要大動(dòng)干戈地建立一個(gè)全部的 view，只需要在內(nèi)置 view 中稍作修改。

這時(shí)候，我們需要先自定義一個(gè) 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());
  }

    這樣一來，每次進(jìn)入到 index 頁面，都會(huì)渲染 admin.content 這個(gè) view 。

view 的內(nèi)容直接 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 組件單獨(dú)一個(gè) 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