I don't know why but select2 is not working by just adding vue js. Tried lot of things like searching but no solution. When i remove vue it works and when i add it don't why is that happening in first thing.
Here is working example of it.
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src='https://unpkg.com/vue#2.5.13/dist/vue.js'></script>
<div id='app'>
<select id="asd" name="asd" class="asd"><option value="1">001 - Środki trwałe x</option><option value="2">001-001 - Środek trwały 1 </option><option value="3">001-002 - Środek trwały 2 </option><option value="4">002 - Kasa</option><option value="7">04-33 - test</option><option value="10">05 - dff</option></select>
</div>
And javascript code is
$(document).ready(function() {
$(".asd").select2();
new Vue({el: '#app'});
});
Or i have also created js fiddle to live demonstrate it we can see it here.
http://jsfiddle.net/8349tck1/39/
I don't know why this is happening but it is a bit weird to me .
Thank You. I hope i can get solution to this weird problem. Really weird.
Vue has own life circle，mouted partly means dom has already loaded.
new Vue({
el: '#app',
mounted:function(){
//use your select2 plugin in vue's mounted period
$(".asd").select2();
}
});
This is the only way i found it to work.
const vm = new Vue({
el: '#app',
data: {
selects: {},
}
mounted() {
// don't forget to adjust the selector
$('#app select').select2().on('change', function() {
// you need to listen to change event to get the new value to Vue data
// you don't need to use `selects` attribute. You can change any property in this call.
vm.selects[$(this).attr('id')] = $(this).val();
});
}
});
You can also add watch property if you also want to update select2 choices the other way.
Actually after searching a lot i found that vue js is too hungry for dom and it doesn't recognize the action taken by jQuery so it will change to default after each lifecycle. Hence select2 doesn't work. To make it work we can just use code like this
$(document).ready(function() {
$(".asd").select2();
new Vue({el: '#app'});
});
For detail info
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/
answer of zyp is correct answer
but i had to change it little bit, because my select 2 loading too fast then vue mounted.
new Vue({
el: '#app',
mounted:function(){
setTimeout( function(){
$(".select2").select2();
},1000);
$(".asd").select2();
}
});
Related
H1 not displaying "Welcome to Vue" it sill displays {{tile}}
<div id="myApp">
<h1>{{title}}</h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el : '#myApp' ,
data : {
title : 'Welcome to Vue'
},
});
Please try the below code in addition to what Dan mentioned in his answer
new Vue({
template: `<h1>{{ title }}</h1>`,
data() {
return {
title : 'Welcome to Vue'
};
}
}).$mount("#myApp");
That Unpkg link is for Vue 3 but your code is Vue 2 code. If you don't specify a version number with Unpkg, it will give you the latest version.
The official Vue docs presented that unversioned Unpkg link for years before only very recently fixing it. Maybe that's where you found it. Anyone using that link had any existing apps broken when Vue 3 released. (I had hundreds of demos using it!)
I'd suggest using Cloudflare:
Vue 2:
https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.7/vue.min.js
Vue 3:
https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js
So I'm trying to add Vue3 to an existing asp.net core project. What I'd like to happen is for my razor app to render as normal, then use custom vue components to give my frontend a more reactive feel. However, when I mount an empty vue app to my wrapper div (parent of all other body content), it seems to be deleting all innerHTML of that wrapper div, completely removing all server rendered body content.
In my _Layout.cshtml file, I'm wrapping all content in a div with id 'app'.
<body>
<div id='app'>
#RenderBody()
</div>
<script src="~/js/vue-app/dist/js/chunk-vendors.76316534.js"></script>
<script src="~/js/vue-app/dist/js/app.bf4c5ba9.js"></script>
</body>
in main.js
import { createApp } from 'vue'
const vueApp = createApp({}).mount('#app');
// component definitions below
With the app set up like this, when I run my .net project I see a blank white browser window instead of the razor compiled html that I expect. In Vue2, it was possible to do this:
const vueApp = new Vue({
el: '#app',
data: {
....
},
methods: {
....
}//, etc
});
Which would result in the app being rendered as normalthe vue app bound to #app, making vue available to the child content (model binding, vue click handling, etc).
I've tried playing around with the isHydrate optional parameter on mount(), but it causes no change in the result.
Am I missing something here? How do you slowly migrate an existing project to use vue3 if you can't mount the app without clearing content? Any guidance is much appreciated.
Thank you
Notes:
vue-next runtime-dom source If this method is the mount method getting called, I'm not sure why container.innerHTML would not be getting set in the component. {} is not a function, and render/template is not defined for it.
vue-next runtime-core apiCreateApp source If this is the method getting called....I have no idea.
Update
Vue 3, without template renderer, will not be able to handle the templates after it has been compiled. To fix that, you can import vue/dist/vue.esm-browser (and vue.runtime.esm-browser.prod for prod), instead of the default vue. This will allow run-time component rendering.
I'm a beginner in Vue, so please bear with my question.
I try to create a simple selectable tree, but for some reason it is displayed incorrectly. Instead of buttons, words remain.
I can't think of anything else I could have forgotten to do.
I tried adding a link to the vuetify CSS file (import 'verify/disk/verify.min. css';), but after that the image becomes even less readable. The link to material design icons is in the file index.html
How can I fix this, please?
Without CSS:
With CSS:
You are using Vuetify 2.x and it (contrary to 1.x) requires that in your Vue constructor
new Vue({
el: "#app",
components: { App },
template: "<App/>",
vuetify: new Vuetify() // <--- the important thing !!!
});
Also - you should wrap your content (in App.vue) inside <v-app> - otherwise the arrow icons on tree nodes will not switch between expanded/collapsed.
I have a form in my Vue component which uploads the api file. Now I want to render the contents of the file like this:
I have imported swagger client library: https://github.com/swagger-api/swagger-ui.
Now, here
is an example of how you do it in a static page. But I need to do it inside a Vue component (or Quasar, specifically), so I do it like that:
Register swagger-ui inside my register components file:
<link rel="stylesheet" type="text/css" href="swagger-ui.css">
Now it is available as:
this.swaggerUI({})
anywhere in my components. Inside my component I have a div in a template to render the api file:
<template>
<q-form>here lies q-file element, submit button and other stuff</q-form>
<div id="swagger-ui"></div>
</template>
In the mentioned question he had something like:
<script>
window.onload = function() {
const ui = SwaggerUIBundle({
url: "https://yourserver.com/path/to/swagger.json",
dom_id: '#swagger-ui',
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
]
})
window.ui = ui
}
</script>
Here's the difference: first of all, no window.onload, I must render it on submit button. Then, I deal with an uploaded file stored in my model, so no URL here. Now, I don't get how to make it work with locally stored file, when I try with the remote url, it gives me:
vue.esm.js?a026:628 [Vue warn]: Error in v-on handler: "Invariant Violation: _registerComponent(...): Target container is not a DOM element."
I was getting a similar error (Target container is not a DOM element) trying to use a static swagger spec. Instead of using window.onload, I found that Vue has the mounted() function, so this Vue 3 file worked for me:
<template>
<div class="swagger" id="swagger"></div>
</template>
<script>
import SwaggerUI from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';
export default {
name: "Swagger",
mounted() {
const spec = require('../path/to/my/spec.json');
SwaggerUI({
spec: spec,
dom_id: '#swagger'
})
}
}
</script>
This one appeared to be a simple yet very unobvious typo: in windows.onload function:
dom_id: '#swagger-ui',
must instead be
dom_id: 'swagger-ui',
without hash sign, that's it!
I'm a newbie to both these frameworks and the first thing I found is a conflict. So because the double curly brackets are reserved by Tornado, I changed the Vue's default ones to single ones:
new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
message: 'Hello Vue.js!'
}
Template:
<td>${ message }</td>
But now it's just not rendered, what I see in a browser is:
${ message }
How to solve this conflict? Am I doing something wrong?
Thanks!
UPD I figured it out. I did several things wrong:
1) I put the script at the "head" section instead of the very end.
2) I didn't add id="app" attribute to some parent element to specify the app object.
After I changed the code everything started working.
Another way to combine Tornado with another template system that uses double-braces is to escape the ones that are to be handled by javascript with {{!:
<h1>This variable comes from Tornado: {{ x }}</h1>
<p>This one comes from Vue: {{! y }}</p>
Tornado's rendering will remove the exclamation point and leave the double braces for Vue to use.
I encountered that as well. This is what worked for me.
Put this in your main.js. N.B you can specify the delimiters to suit your needs
Vue.mixin({ delimiters: ['[[',']]'] })
The in your html you can use it as it is. e.g
<td>[[ message ]]</td>