I'm trying to debug a problem we have in vue editor js package
where everything works ok except for the "loadData" button which although it's
changing the prop initData, the Editor component doesn't seem to render again.
I'm not a js master and this API is not clear to me, I suspect the problem is in the
watch(_ => props.initData, _ => initEditor)
Which looks like it's watching for initData changes but than called a function with no params ??? But i don't understand how it works (or what's the problem making it not work) ? , can anyone have a look and help debug it or say what's wrong?
you should call the initEditor function not just return it
for example
watch(_ => props.initData, _ => initEditor(props))
Related
I am fairly new to Vue3 and web dev in general. my practice setup is with Vue3 and express.
I'm thinking using a global properties like app.config.globalProperties.$isAuthenticated and make it toggle between true and false depending on an axios call to server. Everythin works fine, except I just cannot change its state in any component by this.isAuthenticated = true or false.
Things i tried, this.$isAuthnticated, use ref or reactive in app.js to delcare it in the first place. none of them works for me. In the end i want a global variable to react to server response.
could anyone point me a right direction here? thanks in advance.
I also ran into this issue and tried to find something that resolves the issue.
I found this article about state managment. With it you can create states in the App component while using the variables in any component.
Im a little lost on this, Im trying to get started with Vue but I cannot seem to get the delimiters changed and working. Would someone be nice enough to take a look at this code and tell me if it looks like it should be working? Im using this with Django and need to change them. In addition, even experimenting with the basic tags but loading the HTML page manually in my browser doesn't seem to be working. Any ideas? I can confirm Vue is loading because I get the message in the console when it loads. I am loading this from the CDN.
const app = Vue.createApp({
el: '#table-div',
compilerOptions: {
delimiters: ["[[',']]"],
},
data(){
return {
objects: {},
text: 'This is a test',
}
}
});
OK, so in case someone else runs into issues. My particular issue is that the scripts needed to be loaded outside the ending body tag in my base.html file. I was using a template with Django and I could not get it to work within the template fragment. Loading it in the main file after the </body> tag worked like it should. I'd also add that the new compilerOptions way of changing the delimiter works as intended as well in case anyone stumbles on this trying to change the delimiter for any version 3.1+.
What I want to do is - the user clicks the router-link - this does not actually do a navigation but just refreshes the page with new data. This is no good for accessibility because the user does not know a navigation happened, but good for performance because full navigation not required.
So I would like some way to solve that problem.
The way I might naively expect to solve the problem is wait for navigation to be over and run a callback, or use a promise and when promise completes run code. The code running when navigation over would put the focus on some element at navigation finished.
I was hoping I could do something obvious like the following
<router-link :to="(router) => {
router.push('/').onComplete(() => {
code to set focus here
});
}"
but it doesn't look like that is possible.
How should I solve my problem, as close to this solution as possible please.
This sounds like you might be using the wrong tools for the job. If you aren't actually navigating, there's no good reason to use router link - if you purely want to have the aesthetics of a link, use <a>. And if you are just expecting data to be refreshed, don't use router.push but simply call the function you want by attaching a listener to the link. If you want to show some kind of loading animation during the data fetching, you could either just set a variable, or use a library like vue-wait
In your case this could be something like:
<a #click="onClick">Link to click</a>
...
data(){
return {
isLoading:false
}
}
methods:{
async onClick(){
this.isLoading=true
await fetch(...)
this.isLoading=false
}
}
To answer your original question as well - yes, it's possible to run code when a navigation is finished. There's quite a few ways to do it, but if you want to specifically run code after a router.push, you can do that - router.push is a promise. So router.push(...).then(...).catch() works as well
I'd like to call close on a mouseleave event on an md-menu component. I'm using version 0.7.4 of the vue-materiallibrary, and using this documentation it says that there is a close method.
How do I call this method? I've tried the following:
<md-menu md-size="1" ref="aRef" id="aRef">
<div #mouseleave="this.$refs['aRef'].close()">
...other stuff...
</md-menu>
When I run this I get an error saying:
Uncaught TypeError: Cannot read property 'aRef' of undefined
I'm guessing this is something to do with the component not being available at creation time. What's the correct way of doing this?
I should say that the md-menu is actually nested inside another md-menu (which seems to work ok from a functional perspective). Not sure if that screws up the event hierarchy.
I stumbled across the solution for this one while I was trying to solve a different problem (how to close any other menus before opening another).
Your problem is that you can't use this inline in the html template. You need to send the event to a method and then call it...
<md-menu
ref="aRef"
#mouseleave="closeMenu"
>
// menu contents
</md-menu>
Then in your script section:
methods: {
closeMenu() {
this.$refs['aRef'].close();
}
}
i am a newbie in rails 3.2. now i have a problem following:
i have 2 patials for showing highchart are _device_per_product.html.erb and device_per_platform.html.erb. and i render these by this way:
jQuery("#element_div").html("<%= escape_javascript(render(:partial => 'partial_page')) %>");
when i click a link to render my partial,it works. but next time, i render another partial,it just load javascript code but not generate highchart form these code.
In my opinion,For First time the javascript is freshly loading in my page. So it will work. Next time my javascript is not working. please help me solve that problem
I suspect you have something like:
$('#element_div a').click(function() {
//do something
});
This only binds to what's on the page when it fires. If you are introducing new (or replacing) this then you need to change the listener.
$(document).on("click","#element_div a", function () {
// do something
}} );
A more detailed explanation along with alternatives for older versions of jquery can be found at https://stackoverflow.com/a/10394566/2197771