vue.js Failed to mount component: template
0
i am working hard to solve this issue but not found any one please help me about this
here is my code
calling component
Vue.component('select2', require('./components/select2.vue'));
html of component
<template>
<select>
<slot></slot>
</select>
</template>
here is my vue.js script
<script>
export default {
props: ['options', 'value', 'params'],
mounted: function () {
var vm = this;
var params = !this.params ? {} : this.params;
params.val = this.value;
if(this.options) {
params.data = this.options;
}
$(this.$el).val(this.value);
$(this.$el).select2(params);
$(this.$el).on('change', function () {
vm.$emit('input', $(this).val())
})
$(this.$el).val(this.value).trigger('change');
},
watch: {
value: function (value) {
$(this.$el).val(value);
},
options: function (options) {
var params = !this.params ? {} : this.params;
if(this.options) {
params.data = this.options;
}
$(this.$el).select2(params);
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
}
</script>
but still getting this error i tried alot of things but not working please help me i can give you more detials if you needed i am using laravel ,gulp etc
laravel vue.js gulp
asked Nov 21 '18 at 21:27
Shahneel AhmedShahneel Ahmed
6010
|
show 2 more comments
0
i am working hard to solve this issue but not found any one please help me about this
here is my code
calling component
Vue.component('select2', require('./components/select2.vue'));
html of component
<template>
<select>
<slot></slot>
</select>
</template>
here is my vue.js script
<script>
export default {
props: ['options', 'value', 'params'],
mounted: function () {
var vm = this;
var params = !this.params ? {} : this.params;
params.val = this.value;
if(this.options) {
params.data = this.options;
}
$(this.$el).val(this.value);
$(this.$el).select2(params);
$(this.$el).on('change', function () {
vm.$emit('input', $(this).val())
})
$(this.$el).val(this.value).trigger('change');
},
watch: {
value: function (value) {
$(this.$el).val(value);
},
options: function (options) {
var params = !this.params ? {} : this.params;
if(this.options) {
params.data = this.options;
}
$(this.$el).select2(params);
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
}
</script>
but still getting this error i tried alot of things but not working please help me i can give you more detials if you needed i am using laravel ,gulp etc
laravel vue.js gulp
asked Nov 21 '18 at 21:27
Shahneel AhmedShahneel Ahmed
6010
What you posted should work, there's something else that's breaking. You'll need to dig deeper and provide more details. Are you sure the <ListAdvance> component is working?
– Eric Guan
Nov 21 '18 at 22:34
Please, add code that shows usage ofselect2component. Also, try wrapping<select>tag with a<div>, in caseselect2plugin replaces DOM element, it may cause issues for Vue render.
– aBiscuit
Nov 21 '18 at 22:34
can that issue releated to gulp -development command laravel or some configuration issue
– Shahneel Ahmed
Nov 21 '18 at 23:01
ListAdvance component is not working
– Shahneel Ahmed
Nov 21 '18 at 23:06
i can show you my code on skype and i can pay you good amout for help too
– Shahneel Ahmed
Nov 21 '18 at 23:06
|
show 2 more comments
0
0
0
i am working hard to solve this issue but not found any one please help me about this
here is my code
calling component
Vue.component('select2', require('./components/select2.vue'));
html of component
<template>
<select>
<slot></slot>
</select>
</template>
here is my vue.js script
<script>
export default {
props: ['options', 'value', 'params'],
mounted: function () {
var vm = this;
var params = !this.params ? {} : this.params;
params.val = this.value;
if(this.options) {
params.data = this.options;
}
$(this.$el).val(this.value);
$(this.$el).select2(params);
$(this.$el).on('change', function () {
vm.$emit('input', $(this).val())
})
$(this.$el).val(this.value).trigger('change');
},
watch: {
value: function (value) {
$(this.$el).val(value);
},
options: function (options) {
var params = !this.params ? {} : this.params;
if(this.options) {
params.data = this.options;
}
$(this.$el).select2(params);
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
}
</script>
but still getting this error i tried alot of things but not working please help me i can give you more detials if you needed i am using laravel ,gulp etc
laravel vue.js gulp
asked Nov 21 '18 at 21:27
Shahneel AhmedShahneel Ahmed
6010
i am working hard to solve this issue but not found any one please help me about this
here is my code
calling component
Vue.component('select2', require('./components/select2.vue'));
html of component
<template>
<select>
<slot></slot>
</select>
</template>
here is my vue.js script
<script>
export default {
props: ['options', 'value', 'params'],
mounted: function () {
var vm = this;
var params = !this.params ? {} : this.params;
params.val = this.value;
if(this.options) {
params.data = this.options;
}
$(this.$el).val(this.value);
$(this.$el).select2(params);
$(this.$el).on('change', function () {
vm.$emit('input', $(this).val())
})
$(this.$el).val(this.value).trigger('change');
},
watch: {
value: function (value) {
$(this.$el).val(value);
},
options: function (options) {
var params = !this.params ? {} : this.params;
if(this.options) {
params.data = this.options;
}
$(this.$el).select2(params);
}
},
destroyed: function () {
$(this.$el).off().select2('destroy')
}
}
</script>
but still getting this error i tried alot of things but not working please help me i can give you more detials if you needed i am using laravel ,gulp etc
laravel vue.js gulp
laravel vue.js gulp
asked Nov 21 '18 at 21:27
Shahneel AhmedShahneel Ahmed
6010
asked Nov 21 '18 at 21:27
Shahneel AhmedShahneel Ahmed
6010
asked Nov 21 '18 at 21:27
Shahneel AhmedShahneel Ahmed
6010
asked Nov 21 '18 at 21:27
Shahneel AhmedShahneel Ahmed
6010
asked Nov 21 '18 at 21:27
Shahneel AhmedShahneel Ahmed
6010
6010
What you posted should work, there's something else that's breaking. You'll need to dig deeper and provide more details. Are you sure the <ListAdvance> component is working?
– Eric Guan
Nov 21 '18 at 22:34
Please, add code that shows usage ofselect2component. Also, try wrapping<select>tag with a<div>, in caseselect2plugin replaces DOM element, it may cause issues for Vue render.
– aBiscuit
Nov 21 '18 at 22:34
can that issue releated to gulp -development command laravel or some configuration issue
– Shahneel Ahmed
Nov 21 '18 at 23:01
ListAdvance component is not working
– Shahneel Ahmed
Nov 21 '18 at 23:06
i can show you my code on skype and i can pay you good amout for help too
– Shahneel Ahmed
Nov 21 '18 at 23:06
|
show 2 more comments
What you posted should work, there's something else that's breaking. You'll need to dig deeper and provide more details. Are you sure the <ListAdvance> component is working?
– Eric Guan
Nov 21 '18 at 22:34
Please, add code that shows usage ofselect2component. Also, try wrapping<select>tag with a<div>, in caseselect2plugin replaces DOM element, it may cause issues for Vue render.
– aBiscuit
Nov 21 '18 at 22:34
can that issue releated to gulp -development command laravel or some configuration issue
– Shahneel Ahmed
Nov 21 '18 at 23:01
ListAdvance component is not working
– Shahneel Ahmed
Nov 21 '18 at 23:06
i can show you my code on skype and i can pay you good amout for help too
– Shahneel Ahmed
Nov 21 '18 at 23:06
What you posted should work, there's something else that's breaking. You'll need to dig deeper and provide more details. Are you sure the <ListAdvance> component is working?
– Eric Guan
Nov 21 '18 at 22:34
What you posted should work, there's something else that's breaking. You'll need to dig deeper and provide more details. Are you sure the <ListAdvance> component is working?
– Eric Guan
Nov 21 '18 at 22:34
Please, add code that shows usage of
select2 component. Also, try wrapping <select> tag with a <div>, in case select2 plugin replaces DOM element, it may cause issues for Vue render.– aBiscuit
Nov 21 '18 at 22:34
Please, add code that shows usage of
select2 component. Also, try wrapping <select> tag with a <div>, in case select2 plugin replaces DOM element, it may cause issues for Vue render.– aBiscuit
Nov 21 '18 at 22:34
can that issue releated to gulp -development command laravel or some configuration issue
– Shahneel Ahmed
Nov 21 '18 at 23:01
can that issue releated to gulp -development command laravel or some configuration issue
– Shahneel Ahmed
Nov 21 '18 at 23:01
ListAdvance component is not working
– Shahneel Ahmed
Nov 21 '18 at 23:06
ListAdvance component is not working
– Shahneel Ahmed
Nov 21 '18 at 23:06
i can show you my code on skype and i can pay you good amout for help too
– Shahneel Ahmed
Nov 21 '18 at 23:06
i can show you my code on skype and i can pay you good amout for help too
– Shahneel Ahmed
Nov 21 '18 at 23:06
|
show 2 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420687%2fvue-js-failed-to-mount-component-template%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53420687%2fvue-js-failed-to-mount-component-template%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What you posted should work, there's something else that's breaking. You'll need to dig deeper and provide more details. Are you sure the <ListAdvance> component is working?
– Eric Guan
Nov 21 '18 at 22:34
Please, add code that shows usage of
select2component. Also, try wrapping<select>tag with a<div>, in caseselect2plugin replaces DOM element, it may cause issues for Vue render.– aBiscuit
Nov 21 '18 at 22:34
can that issue releated to gulp -development command laravel or some configuration issue
– Shahneel Ahmed
Nov 21 '18 at 23:01
ListAdvance component is not working
– Shahneel Ahmed
Nov 21 '18 at 23:06
i can show you my code on skype and i can pay you good amout for help too
– Shahneel Ahmed
Nov 21 '18 at 23:06