Open kpihus opened 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')
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 ?
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
I hope this explains a lot.
@vellotis THANK you very much for the explanation.
@FerchoCarcho Didn't your provided example work?
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
@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.
@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
@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.
@vellotis Thank you!. Very appreciated Help.
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.
@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 .
//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.
I was able to resolve the issue with the pull requests, but it produces the following error now:
However, the work around works...
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: