yuche / vue-strap

Bootstrap components built with Vue.js
http://yuche.github.io/vue-strap/
MIT License
4.71k stars 929 forks source link

Vue is not defined in Typeahead #216

Open kpihus opened 8 years ago

kpihus commented 8 years ago

In Typeahead.vue there is ready function: ready() { // register a partial: if (this.templateName && this.templateName!=='default') { Vue.partial(this.templateName, this.template) } }, Where this Vue instance should come from ? There's no import for that, thus using custom template gives error:

ReferenceError: Vue is not defined

yuche commented 8 years ago

Would you pull a request fix  the issue ? 在 2016年5月27日 下午5:18:18, Kristjan Pihus (notifications@github.com) 写到:

if (this.templateName && this.templateName!=='default')

kpihus commented 8 years ago

https://github.com/yuche/vue-strap/pull/217

kpihus commented 8 years ago

Seems that this fix isn't so simple. Partial registrering now works correctly and Vue is aware new template. But when i try to render it in typeahead element i'll get another error:

vue.common.js?e881:1014 [Vue warn]: Failed to resolve partial: my-template (found in component: )

Any ideas ?

vellotis commented 8 years ago

Putting Vue.partial registering in created or beforeCompile handler seems to solve the problem; I think the better option is to register the partial the latest we can. That means in beforeCompile handler.

I created a jsfiddler for that: https://jsfiddle.net/uf1cykv3/8/

Vue component Lifecycle Hooks: init -> created -> beforeCompile -> compiled -> ready -> attached -> detached -> beforeDestroy -> destroyed Lifecycle Hooks

I hope this explains a lot.

FerchoCarcho commented 8 years ago

@vellotis THANK you very much for the explanation.

vellotis commented 8 years ago

@FerchoCarcho Didn't your provided example work?

FerchoCarcho commented 8 years ago

hello @vellotis I have refreshed the installation right now from vue-strap to vue-strap@1.0.11 node_modules/vue-strap but isnt working yet it gives the same error as @kpihus I was going to ask you how to make it with module exports.

var Vuestrap = require('vue-strap/dist/vue-strap.min.js');
Vuestrap.typeahead.ready = function() {}
Vuestrap.typeahead.beforeCompile = function () {
    Vue.partial(this.templateName, this.template);
}

    module.exports = {
//////
}

I dont know where to use the Vue.partial variable

vellotis commented 8 years ago

@FerchoCarcho You should be able to monkey patch your VueStrap exactly the way you showed. You don't have to export anything. Just...

// monkeyPatch.js
var Vuestrap = require('vue-strap'); //  or 'vue-strap/dist/vue-strap.min.js' if you insist
Vuestrap.typeahead.ready = function() {}
Vuestrap.typeahead.beforeCompile = function () {
    if (this.templateName && this.templateName !== 'default') {
        Vue.partial(this.templateName, this.template);
    )
}

// someOther.js
require('./monkeyPatch'); // This has to be done only once in the project not always before requiring 'vue-strap' or 'vue-strap/dist/vue-strap.min.js' if you insist
var Vuestrap = require('vue-strap');
... use VueStrap ...

...anywhere before actually using VueStrap components.

FerchoCarcho commented 8 years ago

@vellotis Im using the .vue file because of that the module.exports if I useVuestrap = require('vue-strap'); it doesnt compiles and gives an Error. which states it cant find the Vuestrap modules. I have done what you told but Still the same error.

ReferenceError: Vue is not defined
vellotis commented 8 years ago

@FerchoCarcho Sry. I don't have the environment up and running at the moment. You have to find by yourself the path to VueStrap `typeahead* property and override it. You may debug the package by...

var VueStrap = require('vue-strap');
// on Node.js
var util = require('util');
console.log(util.inspect(VueStrap, {depth: 5}));
// In Browser
console.log(VueStrap);

From that you should be able to find the property paths to override.

FerchoCarcho commented 8 years ago

@vellotis Thank you!. Very appreciated Help.

FerchoCarcho commented 8 years ago

I Realized Im not that pro to debug core Functions, So Could @yuche , @amanpatel @vellotis Please help?? , Considering this Bugged Feature is a Core for The Vuestrap itself? I tried upgrading node and npm but the error remains. Yet var Vuestrap = require('vue-strap/dist/vue-strap.min.js'); Is the only way I can make Vuestrap to work.

vellotis commented 8 years ago

@FerchoCarcho Let's start from the beginning. What is your setup and how are you trying to use VueStrap?

2016-05-31 15:45 GMT+03:00 FerchoCarcho notifications@github.com:

I Realized Im not that pro to debug core Functions, So Could @yuche https://github.com/yuche , @amanpatel https://github.com/amanpatel @vellotis https://github.com/vellotis Please help?? , Considering this Bugged Feature is a Core for The Vuestrap itself? I tried upgrading node and npm but the error remains. Yet var Vuestrap = require('vue-strap/dist/vue-strap.min.js'); Is the only way I can make Vuestrap to work.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yuche/vue-strap/issues/216#issuecomment-222677260, or mute the thread https://github.com/notifications/unsubscribe/AASzagC9poVoVrWQif5gf_qpGu297FMvks5qHC1MgaJpZM4IoUby .

FerchoCarcho commented 8 years ago

//backend.js

var Vue = require('vue');
var resource = require('vue-resource');
var VueRouter = require('vue-router');
Vue.use(resource);
Vue.http.headers.common['X-CSRF-TOKEN']=document.querySelector('#token').getAttribute('value');
Vue.use(VueRouter);
var router = new VueRouter();

router.map({
   // 3 Route (home,about us, news)
});

var App = Vue.extend({

// Inicialization of Data related to pages

});
// point to hook vue
router.start(App,'#app-layout');

//index.blade.php // main html

@section('content')
<div id="content">
              <ul id="tabs" class="nav nav-tabs" >
                 <li><a v-link="{ path: '/'}" >Home</a></li>

                 <li><a v-link="{ path:'/aboutus' }" >About us</a></li>

                 <li><a v-link="{ path:'/news' }" >News</a></li>

              </ul>
              <div id="my-tab-content" class="tab-content">

                  <div class="tab-pane active" >
                              <router-view></router-view>
                  </div>
              </div>
</div>
@endsection

@section('scripts')
    <script src="/js/backend.js"></script>
@endsection

// When Visited the news page there is a Typeahead component to search an specific News. // news.vue

<template>
    // Just htmls and vue Directives and a field for the typeahead component

    <div slot="modal-body" class="modal-body">
        <span>Usted va a {{action.action}} : {{formdata.title}}</span>
           <typeahead v-if="action.where=='sendto'"
               key="items"
               async="http://back.dev/search/"
               placeholder="Busca Email"
               :template="typeaheadtmplate"
               template-name="type"
               :on-hit="present">
           </typeahead>
    </div>
</template>
<script>
// HERE is where I call the typeahead component
var Vuestrap = require('vue-strap/dist/vue-strap.min.js');
Vuestrap.typeahead.ready = function() {};
Vuestrap.typeahead.beforeCompile = function () {
    if (this.templateName && this.templateName !== 'default') {
        Vue.partial(this.templateName, this.template);
    }
};

module.exports = {

components: {

            'typeahead':Vuestrap.typeahead
            },
data: function () {
            return {
                typeaheadtmplate: '<span>{{item}}</span>'
}
</script>

@vellotis That is basically the structure of the Code.

allentong commented 8 years ago

383

I was able to resolve the issue with the pull requests, but it produces the following error now:

image

However, the work around works...