I didn't find any documentation on $createElement in nuxt.
I tried using the following code to create an HTML Element:
const elem = this.$createElement('h' + this.hlevel)
elem.text = this.myTitle
console.log('My Element:', elem)
Result is an object but I do not know how to render it.
Is it really to create an HTML Element or should this be used for a different use case?
createElement is basically an alias to h, you can read more about it here: https://vuejs.org/guide/extras/render-function.html#render-functions-jsx.
Those are aimed towards highly customizable dynamic markup generation. If you don't need that (or you issue could be solved with a dynamic component for example), it may probably be overkill.
Simply use
render() {
return this.$createElement('h' + this.hlevel, this.myTitle)
},
Also make sure you don't have
<template></template>
as this will overwrite render().
Note: as kissu commented, the use of h() or $createElement() is probably overkill :)
Related
I use the ReadMore plugin to crop articles in a page. The plugin provides a props to redirect to a http link when the "read more" is clicked. But I need to display the link in a new tab. The props receives the link in a string.
I tried several ways to add the target blank attribute to this string before passing it to the props. With no success. Like:
http://www.example.com/page-to-see.html target=_"blank"
I used it with or without quotes but in any case, the link works but the attribute is skipped.
Is there a way to intercept this and add a target blank later?
I saw in other questions the use of router-link but I don't know how to manipulate the props content in the first place.
Any clue would be warmly welcomed
Edit: adding more code to give a clearer explanation of the problem I try to solve:
In the template:
<read-more more-str="read more" :text="dwId.texte" :link="dwId.link" less-str="less" :max-chars="540"></read-more>
I get the values from a DB with Axios. The props are specified by the plugin documentation.
The :link must be a string and it's what it gets from the DB. It works. But as I explained, I need to open in a new tab.
Edit: what I tried:
I try to make a computed property that would add the target blank to a string and use it in the read-more props:
computed: {
target: function() {
return this.dwIds.filter((dwId) => {
return dwId.link + target="_blank"
});
},
}
I have two issues here: first , the result is an object and the props requires a string. Furthermore, the way I add the target blank is not correct but I can't find the right syntax yet.
You need to use it as a directive, and override parts of the initial element you're passing. Otherwise there is no way to "intercept" it. Here's the code to the "component" version that won't do the trick for you.
I'm currently implementing vue-tables-2 (first time) and I've set up a template to show an icon that will fire an event when clicked. However, I'm getting an error that I'm not sure where it's deriving from. The error is the following.
Uncaught TypeError: fns.apply is not a function
at HTMLAnchorElement.invoker (vue.esm.js:1821)
templates: {
edit: function (h, row) {
return </i>
}
The function code itself is as follows.
editSchedulesBtn: function (rowId) {
console.log(rowId)
}
I have found this stackoverflow question have tried implementing it, but no success --> How to bind vue click event with vue tables 2 (JSX)?
Thanks for all assistance in advance.
I see a few problems:
A syntax error:
Instead of
edit: function (h, row) {
return </i>
}
Should be:
edit: function (h, row) {
return </i>
}
Secondly, the this context inside the function refers to the root vue instance, as stated in the docs:
In addition a this context will be available, which refers to the root
vue instance.
So the $parent is obsolete. You might even have to use $children or $refs, depending on your app structure (Explore the tree using the chrome dev tools and you will find the exact "address").
Thirdly, when binding an event with jsx you should not call the method directly, but use the bind method instead (As explained in the answer you have attached):
on-click={this.editSchedulesBtn.bind(this, row.id)} // See the aforementioned answer for ES6 syntax
As an aside, since Vue introduced scoped slots in v2.1, it is best to use those rather than jsx, which requires compilation, and is generally more cumbersome to deal with.
How can I use vue.js with the dust template engine? Both are using {{}} as placeholders, are there any options to say dust: Hey, this part is especially for vue?
I got no idea since I haven't had found anything in the documentations.
https://vuejs.org/api/#delimiters
Vue.config.delimiters = ['!v', 'v!']
You can set the delimiters for Vue to whatever you'd like to avoid conflict. Also see Vue.config.unsafeDelimiters - https://vuejs.org/api/#unsafeDelimiters
The converse answer for Dust is that you can wrap a block in {` tags to tell Dust not to parse that block.
context = { "dust": "DUST!", "vue": "error" }
{dust} says {` hello {vue}! `}
will render to
DUST! says hello {vue}!
When writing a control, prior to it's rendering you can add css classes to it's html representation's root dom node:
FooLayout.prototype.init = function() {
this.addStyleClass('fooCssClass');
};
This will work assuming writeClasses is executed during rendering:
oRenderManager.writeClasses();
--
There is another RenderManager function writeStyles which can add in-line styles to the html string buffer:
oRenderManager.addStyle("color", "green");
oRenderManager.writeStyles();
But there doesn't seem to be an analogous function to addStyleClass for adding these at the control level to be picked up during rendering.
Is there a way I can hook into writeStyles outside of the renderer?
I have to ask: What styling cannot be applied on control level with a class that can be done with a specific style attribute?
Anyway, the "solution" (which I do not like) would be to add a delegate to the class and do something on onAfterRendering:
oControl.addDelegate({
onAfterRendering: function() {
this.$().css("opacity", "0.5");
}.bind(oControl)
});
Here is an example: http://jsbin.com/seqemaqedo/1/edit?js,output
But as I said, I would advice against it because using a good name for a class uses less code and is much easier to read:
oControl.addStyleClass("semiTransparent");
Update:
After our discussion in the comments, here is an example of how to wrap a control that does not support setting width and height.
You still have to write CSS that references the inner control structure, but in this case it is very unlikely that it will change:
http://jsbin.com/lohocaqixi/3/edit?html,js,output
I'm just getting started with dojo, and I've understood that dojo.query is the same as $ in jQuery.
But I haven't figured out what it returns. Is it a specialized object like in jQuery?
What I'm trying to do (with no luck) is:
dojo.query("output").innerHTML = data;
//this doesn't work either:
dojo.query("output").html(data);
//tried accessing by id as well
dojo.query("#output").html(data);
//and tried to access a div, incase dojo has some issues with html5 elements
dojo.query("#divOutput").html(data);
And I'm currently using the new html5 elements:
<output id="output">Output goes here</output>
<div id="divOutput">non-html5 output goes here</div>
And I can't seem to find a good list on what to do with objects returned by dojo.query()..
edit: Okay, I think dojo is just messing with me now. I found this method: addContent() and that works on the above selector. But I don't want to add content, I want to replace content...
The query method returns a NodeList object.
In the ref for NodeList you can find a list of functions that you can apply to the list
of elements. There is no innerHTML function for the list, but the html function should work.
There is no "output" element in HTML, perhaps you try to target elements with the class name "output"?
dojo.query(".output").html(data)
Or the element with id "output"?
dojo.query("#output").html(data)
If you want to replace all the output tags' content with the same thing, then this code should always work:
// replace the contents of ALL <output> tags
dojo.query('output').forEach(function(node) { node.innerHTML = data; });
Dojo also provides a little shortcut for these kinds of things. You can specify a string to NodeList's forEach function like this:
// replace the contents of ALL <output> tags (as long as data is global)
dojo.query('output').forEach("item.innerHTML = data;");
The word item in the string is special. (This is a pain to debug, so it might not be worth it.)
As was said above, query method returns NodeList object, so you can iterate it's result as array, or use dojo methods that work with NodeList (e.g. attr):
dojo.query("#divOutput").attr("innerHTML", data);
But as soon as you are trying to query nodes by id, it would be better to use dojo.byId() method, which returns domNode:
dojo.byId("divOutput").innerHTML = data;
Or in more dojo style:
dojo.attr(dojo.byId("divOutput"), "innerHTML", data)
Try this by adding the [0] like this:
dojo.query("output")[0].innerHTML = data;
Also, there is a dojox.jq wrapper (in development, coming in 1.4) which emulates the JQuery return object APIs
The documentation seems to be a mess, this is the only thing i get to work with 1.7,
dojo.query("whatever").forEach(function(node, index, array)
{
node...
});