laravel-adminとvueを組み合わせて実例コードを使用して詳しく説明します。

Laravel-adminはpjaxの方式でページを更新するため、多くのページの更新の操作を意味しています。全体のdocumentを更新するのではなく、サーバーから一部のdocumentを持ってきて、また$(“#pjax-container”).html(newPart) のような方式で更新しました。
これは問題を引き起こして、毎回pjaxは更新して、いずれもvueのdomマッピングを破壊します。
だから理論的には2つの方法があります。
vueのマッピング関係を再結合します。
いくつかのページでは、pjaxを禁止しています。
1難しくて、資料がないので、諦めます。2ならいいです。
一部禁止です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を構築する必要はありません。
この時、まず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.co ntというviewをレンダリングします。
viewの内容は直接copyでvendor/encore/laravel-admin/resources/views/content.blade.php からです。
viewにvueのセットを挿入します。
コードを2つ追加すればいいです。
第一部は初期化vueアプリです。

<script data-exec-on-popstate>
  // 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')
     },
    },
   })
  })
  </script>

 第2部は挿入部品である。

<gallery-editor :status="status" :images="store.images" :pk="store.pk">
</gallery-editor>

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: `
      <div class="modal" tabindex="-1" role="dialog" :class="{show: status.showGalleryEditor, fade: !status.showGalleryEditor}">
       <div class="modal-dialog" role="document">
        <div class="modal-content">
         <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="close"><span aria-hidden="true">×</span></button>
          <h4 class="modal-title">Editing images</h4>
         </div>
         <div class="modal-body">
         <ul style="list-style-type: none;">
           <li v-for="(imageObj, key) in moveTo" :key="key" style="margin-bottom: 8px">
             <img :src="imageObj.src" alt="" style="width:40px;height:40px">
             <label>Move to product: <input type="text" v-model="imageObj.productId"></label>
             <label>Delete:<input type="checkbox" v-model="imageObj.deleted"></label>
          </li>
          </ul>
         </div>
         <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" @click="close">Close</button>
          <button type="button" class="btn btn-primary" @click="save">Save changes</button>
         </div>
        </div>
       </div>
      </div>`,
})

これはポップアップ式の編集枠です。具体的な役割は説明しません。ただの例です。
その後、このjsファイルをAdmin/bootstrap.php で参照する必要があります。Admin::js('/vendor/components/gallery-editor.js');はなぜコンポーネントコードを直接viewに書かないですか？
pjaxのバックエンドロジックはバグがあるようですので、templateの内容は全部フロントエンドにレンダリングできなくて、ページエラーが発生しました。
締め括りをつける
以上述べたのは小编でご绍介したlaravel-adminとvueを结び付けて実例コードを使って详しく解说します。皆さんに助けてほしいです。ここでも私たちのサイトを応援してくれてありがとうございます。