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.
Related
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 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>
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();
}
});
This question already has answers here:
What is an empty element?
(3 answers)
Closed 5 years ago.
when I use the vue webpack template, I found the code like this,
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>', // <--
components: { App }
})
I know what this means, I just wondering why here only need half tag? is this a abbreviation? I checked the vue js official document and haven't find any clue.
It's short for
<App></App>
It only works in string templates (template: '....' or .vue files), not in in-DOM templates in your .html page.
The reason is that this short form isn't valid HTML after the latest specification (these self-closing elements existed in earlier versions of the HTML spec, though, i.e. <img src="http://..."/>)
Since string templates are never touched by the browser's DOM engine, we can allow this shortcut in those.
WebStorm recognize only <md-list-item> HTML tag from VueMaterial, the rest are not listed in the pop-up and after using them I get unknown HTML tag warning.
my main.js looks like that:
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(VueMaterial)
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
I'm using WebStorm v2017.1.3
I had the same problem, I upgraded to WebStorm 2017.3 and it works now.
Looks like the custom tags haven't been added to your accepted html tag list. click on the tags and press Alt+Enter and then Add {Custom Tag} to custom html tags
What it's showing is the inspector trying to indicate malformed tag names, like <sapn> instead of <span>, you can disable this inspection as well but adding them to the custom tag list let's you indicate the tags you want while allowing it to continue to protect you.
You can also add custom directives like v-bind:xxxxxx or :xxxxxx to an accepted property list if the inspector has an issue with them.
It happened to me on WebStorm 2021.2, and I tried to File - Invalidate Caches. After restarting WebStorm, it turns OK.