javascript - Vue + Turbolinks, how can I initialize components after page loads -


i set 1 root (new vue) , add components it. in views use component needed @ time. instance:

// gulp.js: build tooling

var elixir = require('laravel-elixir'); var paths = require('./resources/paths.js'); var config = require('./resources/config.js');  elixir.config.publicpath = paths.public;  elixir(function(mix) {     mix     .copy('resources/assets/images',paths.images)     .copy('resources/assets/vendors/bootstrap-colorpicker/img',paths.images)     .copy('node_modules/simple-line-icons/fonts',paths.fonts)     .copy('node_modules/bootstrap/fonts',paths.fonts+'/bootstrap')     .styles(paths.vendor.css, paths.css+'/vendor.css')     .scripts(paths.vendor.js, paths.scripts+'/vendor.js')     .sass('app.scss')     .babel('app.js')     .browserify('app.js')     .version(paths.versioned)     .browsersync(config.browsersync); }); 

// app.js

    var vue = require('vue');     var vueresource = require('vue-resource');     // load resources vue     vue.use(vueresource);      // load store     var store = require('./store');      // set vue debug state     vue.config.debug = true;     // set headers     vue.http.headers.common['x-csrf-token'] = greenchoice.csrftoken;     vue.http.headers.common['authorization'] = 'bearer ' + localstorage.getitem('id_token');      // components    new vue({         el: 'body',         data: store,         data() {             return {                 'store': store             }         },         ready() {             this.store.router = this.$http;             this.$broadcast('application-ready');         },         components: {             'specialtype-builder': require('./components/specialtypes/specialtype-builder'),             'fieldgroup-builder': require('./components/fieldgroups/fieldgroup-builder')         }     }); 

// , template

@extends('layouts.app')      @section('content')      <div class="container spark-screen">         <div class="row">               <div class="col-md-12">                <!-- component -->                 <specialtype-builder :store="store" :uuid="'{!! $specialtype->id !!}'" />              </div>         </div>     </div>     @endsection 

my question

the view above loaded through turbolinks. https://github.com/turbolinks/turbolinks

how working? experiences? @ point, component isn't initiated.


Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -