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
Post a Comment