laravel-admin 与 vue 结合使用实例代码详解

// 不使用 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  } }})

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());  } 

<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>

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

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>`,})