What is the alternative of innerHtml in riotjs
like
asdfghjkl
in js
we write
var str=document.getElementById("one").innerHtml;
but for the same html tag we have to get that value in riotjs
like
riot.id will return value "one"
what function will retun value "asdfghjkl" instead of .
If I understand your question correctly you would like to get the innerHTML of your created tag. That is as easy as "this.root.innerHTML".
<riot-tag>
asdfghjkl
<script>
this.on('updated', function(){
console.log(this.getInnerHTML());
});
getInnerHTML(){
return this.root.innerHTML;
}
</script>
</riot-tag>
If you need the innerHTML of any sub-element of your created tag set a name or id property on the element and reference it directly. Or if you are calling your function from an event, like click, have the element reference from e.target.
<riot-tag>
<h1 onclick={getInnerHTML} name="myTagHeader">asdfghjkl</h1>
<script>
getInnerHTML(e){
console.log(e.target.innerHTML);
console.log(this.myTagHeader.innerHTML);
}
</script>
</riot-tag>
Hope that it will help
Related
With Vue 2 I have this in my template:
<table ref="test">
....
</table>
When I get this via this.$refs.test I get [object HTMLTableElement] is there a way to return the actual HTML?
It's hard to tell what's your purpose in doing this, but if you want to be able to for example display it's outerHTML you have to check if this.$refs.test exists and if it does - render it. This is because refs aren't reactive so using computed properties won't work.
<pre v-if="!!$refs.test">{{$refs.test.outerHTML}}</pre>
If you want to set it's outerHTML to a property or use querySelector or any other DOM operation on it, you need to wait for your component to be mounted.
mounted() {
this.testRowContent = this.$refs.test.querySelector('.test').innerHTML;
}
Example: http://jsfiddle.net/eywraw8t/323125/
I've just wanted to know if it is possible to find a DOM element by the key attribute of vue?
I'm currently working with a list. I'm displaying it via v-for directive on a div. I'm binding the key with the index of the elements.
v-for="(apk, index) in project.apks" v-bind:key="index"
It would really help me if i could compute something for each of these elements as soon as they are fetch from my server and displayed. It's just parsing a file and looking for keyword, and accordingly choosing a css class for the items.
The problem is I dont know how to call a method for each of these elements as soon as they are added to the DOM. They are a lot of html events but i couldnt find one representing the object beeing inserted to dom :(
The purpose of key is not selecting element. Even if it can be done, don't do it.
The proper way to do it is by using ref.
for example, add ref attribute to your html like this
v-for="(apk, index) in project.apks" v-bind:key="index" :ref="'sample-ref-'+index"
and then in your methods, you can get the DOM using this.$refs['sample-ref-0'],this.$refs['sample-ref-1'] and so on.
Hope this helps.
I found that if you give the 'ref' the same name in a v-for, like this:
<div v-for="data in list" :key="data.id" ref="bar"></div>
Then you will find they just store in an array called 'bar' and you can visit them by:
this.$refs['bar'][index]
something like this could allow you to find a component by key :
this.$children.forEach(child=>{
print("child.$vnode.key")
})
also use mounted , as it gets called when the component is added to the dom:
mounted:function(){
this.$el.querySelector("#ele1")...
}
The problem is I dont know how to call a method for each of these elements as soon as they are added to the DOM. They are a lot of html events but i couldnt find one representing the object beeing inserted to dom :(
You can create a new component with your v-for and just call the created() hook.
Example
/* On your main function */
<div v-for="apk in project.apks">
<apk :data="apk"></apk>
</div>
/* On your 'apk' component */
export default {
props: [ "data" ],
created() {
console.log("Created !");
}
}
I have a global directive in vue js
Vue.directive('customDirective',{
bind(el,binding,vnode){
// need to get the parent
// append a div after the input element
}
})
I have the following html code .
<div class="parentDiv">
<input type="text" name="firstName" v-customDirective="Some text"/>
</div>
<div class="parentDiv"> is loading dynamically via jquery. I need to get the parent of input tag and need to append some html after the input tag. I have tried with parent(), but it is showing as parent is not a function. Any suggestions ?
You should probably use the inserted hook instead of bind if you want to access the parent element.
You can get the parent element via el.parentElement.
You probably should use vnode, and Vue nextTick.
import Vue from 'vue';
Vue.directive('customDirective',{
bind(el,binding,vnode){
Vue.bextTick(() => {
let parent = vnode.elm.parentElement;
});
}
})
If you want to use parent() which is the jQuery function, you must get the element by jQuery.
Vue.directive('customDirective',{
bind(el,binding,vnode){
Vue.bextTick(() => {
let id = vnode.elm.id;
let parent = jQuery('#'+id).parent();
});
}
})
I'm not sure, that second code works, but it will be something like that.
I got this error
Interpolation inside attributes has been removed. Use v-bind or the
colon shorthand instead. For example, instead of <div id="{{ val }}">,
use <div :id="val">.
on this line
<a href="/Library/#Model.Username/{{myVueData.Id}}">
It works in Angular 1. How do you do it in Vue?
In your template:
<a :href="href">
And you put href in data:
new Vue({
// ...
data: {
href: 'your link'
}
})
Or use a computed property:
new Vue({
// ...
computed: {
href () {
return '/foo' + this.someValue + '/bar'
}
}
})
Just complementing ... solve the interpolation error (simple solution, I am Junior front-end developer):
Example post object in a loop:
instead of
<a href="{{post.buttonLinkExt}}">
try this way
<a v-bind:href="post.buttonLinkExt">
Use javascript code inside v-bind (or shortcut ":") :
:href="'/Library/#Model.Username' + myVueData.Id"
and
:id="'/Library/#Model.Username' + myVueData.Id"
Update Answer
Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute:
<a v-bind:href="url"></a>
Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of the expression url. You may have noticed this achieves the same result as an attribute interpolation using href="{{url}}": that is correct, and in fact, attribute interpolations are translated into v-bind bindings internally.
Found in Google this topic when searching $attrib.
Question don't specify what value is used (maybe not defined before)
For ANY parent attribute or to FILTER it, use something like that:
<template>
<component
is="div"
v-bind="$attrs"
class="bg-light-gray"
>
EXAMPLE
</component>
</template>
This instruct to create specific, dynamic and context aware, wrapper:
v-bind="$attrs" instruct to take all sended params. Not needed to declare as param object in script.
Work even with valid html attribute like class
example above mix static class with parent and join it. Use ternary operator (x=1?x:y) to choose proper one.
bonus: by "is" you can dynamically set tag like header or secion instead of div
$attrs can be binded to any tag in component so this easily enable simple transmission for one tag dynamic attributes like you define class for <input /> but wrapper and actions are added in component
Source with description: https://youtu.be/7lpemgMhi0k?t=1307
you can either use the shorthand : or v-bind
<div>
<img v-bind:src="linkAddress">
</div>
new Vue({
el: '#app',
data: {
linkAddress: 'http://i3.kym-cdn.com/photos/images/newsfeed/001/217/729/f9a.jpg'
}
});
or for when you need more than just binding an attribute you can also do:
new Vue({
el: '#app',
data: {
finishedLink: ' Google '
}
});
I have looked lot similar questions, but still have difficulties getting it done. Try-d observable-s but messing up somewhere and cant get it done. new to riotjs still
in child tag i have a function that pushes data to a list:
<make-list>
...lots of html...
<script>
var piclist = []; --after first function run this list has data
....
done: function (e, data) {
piclist.push(data.result);
}
...
</script>
</make-list>
and in parent data i want to access it in a function
<main>
...lots of html..
<script>
riot.mount('make-list')
and i wana use that piclist = []; list here inside a function
</script>
</main>
Got it done this way with using mixin. Maybe it's not the right way, but it works.
<main>
...lots of html..
<script>
riot.mount('make-list')
var piclist = [];
riot.mixin(piclist)
</script>
</main>
<make-list>
... lots of html ...
<script>
...
done: function (e, data) {
piclist.push(data.result);
}
...
</script>
</make-list>
It seems you want to have the make-list tag create list items for a list that is displayed by main and make-list is to be a child of main.
You are using riot.mount('make-list') within the parent tag. That is at least very unusual: It actually triggers all make-list tags on the page to be mounted. Why not go with the riot way and add it within the html part of the parent, like this?
<main>
... lots of html ...
<make-list opts={piclist} />
<script>
this.piclist = [];
</script>
</main>
The opts allow you to pass data to the child (in this case the reference to the list). You can access that within the child tag like so:
<make-list>
... lots of html ...
<script>
...
done: function (e, data) {
this.opts.piclist.push(data.result);
}
...
</script>
</make-list>
I hope this helps.
Take a look at RiotComponent. It enable communication between elements in an intuitive way.