How to Set A Methods For A Class In Vue.js - javascript

you know that we can use on events for a class in JQuery.
for instance
$(".example").click(function(){
//the process
})
I am new on Vue.js and I am working on methods in vue.js
Vue use v-on attr to set a method for a element. But I dont want to define attr for all elements whichs use same function.
For Example
<ul class="container">
<li v-on="click:Menu" >Menu 1</li>
</ul>
<ol class="click">
<li v-on="click:Menu" >Menu 1</li>
<li v-on="click:Menu" >Menu 2</li>
</ol>
You must saw, I used v-on attr for all li elements. For li elements it is not problem, I can solve it v-repeat but for some cases, I have to set same function for lots of divs or form. I want to set a class for a function and set a method for the class.
Is there any solution for it?

David's answer is good. But if you don't want to use Jquery, you can use document.querySelectorAll instead of $(this.el).find("li") and then add the click handlers with addEventListener in the directive.
Having said that, you don't have to add event listeners to all the elements in a directive (even though a directive might be the best solution for this). Another approach would be to do what you suggest, put the handlers on the parent elements, and then implement some logic depending on which element the function was called from. Example:
https://jsfiddle.net/q7xcbuxd/33/
<div id="app">
<ul class="UL_items" v-on="click:Menu(1)">
<li>Menu 1 item 1</li>
</ul>
<ol class="OL_items" v-on="click:Menu(2)">
<li>Menu 2 item 1</li>
<li>Menu 2 item 2</li>
<li>Menu 2 item 3</li>
</ol>
<div class="DIV_items" v-on="click:Menu(3)">
lots<br/>
of<br/>
items<br/>
</div>
</div>
var vue = new Vue({
el: '#app',
methods: {
Menu: function(id){
console.log('You invoked function Menu' + id + ' ' +
'by clicking on ' + event.path[0].innerHTML + ' ' +
'which is of type ' + event.srcElement.nodeName + '.\n' +
'The parent element\'s class name is \'' + event.srcElement.parentElement.className + '\' ' +
'which is of type ' + event.srcElement.parentElement.nodeName + '.');
}
}
});

I would write a directive for <ol> and <ul> that adds click handlers for all <li> children.
Something like:
Vue.directive('menu', {
bind: function () {
$(this.el).find("li").on("click", function (event) {
this.menu_click(event);
});
},
update: function (value) {
this.menu_click = value;
},
unbind: function () {
$(this.el).find("li").off("click", this.menu_click);
}
})
And use it like this:
<ul class="container" v-menu="container_click">
<li>Menu 1</li>
</ul>
<ol class="click" v-menu="click">
<li>Menu 1</li>
<li>Menu 2</li>
</ol>

Related

JQ Selectable Cancel Selected in Selecting Event

I'm using jQuery Selectable and would like to know whether is it possible to prevent Selected event to be triggered from Selecting event?
Actually, I want to show some popup/confirmation in Selecting event, and if user confirms that then I would like the Selected event to be triggered.
Any solution or workaround(or alternative) would be highly appreciated.
You can do it like this:
HTML
<ul id="selectable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<input id="btnGet" type="button" value="get selected items" />
JS
$("#selectable").selectable({
selected: function(e, ui) {
if (confirm('Are you sure to select ' + $(ui.selected).html() + '?')) {
$(ui.selected).addClass("ui-state-highlight");
} else {
$(ui.selected).removeClass("ui-state-highlight");
}
}
});
$('#btnGet').click(function() {
var selectedItems = [];
$('.ui-state-highlight').each(function() {
selectedItems.push($(this).html());
});
alert(selectedItems.join(','));
});
Online demo (jsFiddle)

How can I get number from each id and append to another data attribute using jquery?

I have some listings.
Currently id is test_3, test_1, test_2. I need number (3,1,2) from id of each li and append this number in to another data attribute. Please check the result section. It will give you an idea about what I am expecting. Thanks
Html
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
Script
$('#cat').attr('id').split("-")[2];
Expected result
<ul id="cat">
<li id="test_3" data-id="3">Text 3</li>
<li id="test_1" data-id="1">Text 1</li>
<li id="test_2" data-id="2">Text 2</li>
</ul>
To achieve this you can loop over the li elements and set the data() based on the number in the id attribute. Try this:
$('#cat li').each(function() {
$(this).data('id', this.id.split('_')[1]);
}).click(function() {
console.log($(this).data('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
You can loop through all of the children of the ul element with the id cat.
On each loop, get the ID by getting the id attribute, splitting it on _ and getting the first index.
You can then set the attribute by using JQuery's attribute function, which you can learn more about here.
$('#cat li').each(function () {
var dataId = $(this).attr('id').split('_')[1];
$(this).attr('data-id', dataId);
});
An example of this in action
$('#cat li').each(function () {
var dataId = $(this).attr('id').split('_')[1];
$(this).attr('data-id', dataId);
});
console.log($('#cat').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
This should some your problem.
Using $(this).attr("id").split('_') will split "cat_3" into "cat" and "3" then using [1] after will select "3"
$("#cat li").each(function(){
$(this).attr("data-id", $(this).attr("id").split('_')[1]);
})
console.log($("#cat").html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="cat">
<li id="test_3">Text 3</li>
<li id="test_1">Text 1</li>
<li id="test_2">Text 2</li>
</ul>
You can also use a RegExpression.
var suffix = "test_2".match(/\d+/); // results --> 2
Basically it fetches out numeric value within a string value.
Usage
$('#cat li').each(function() {
$(this).data('id', this.id.match(/\d+/));
})

Select/deselect all node with same ID on fancytree plugin

I am trying to create company structure.
One employee can been employeed in two sector, but this is same employee with same ID id = employee1.
Checking if is item selected or deselected and this is working.
I having problem with nodes with same id.
When selected node with id employee1, I want select/deselect all node where is id employee1.
Thank you in advance.
<div id="companyEmplyee">
<ul>
<li class="folder" id="company1">Company
<ul>
<li class="folder" id="sector1">Sector 1
<ul>
<li class="emplyee1">Emplyee 1</li>
<li id="emplyee2">Emplyee 2</li>
</ul>
</li>
<li class="folder" id="sector2">Sector 2
<ul>
<li class="emplyee1">Emplyee 1</li>
<li id="emplyee35">Emplyee 35</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
var tree = $("#companyEmplyee").fancytree({
checkbox: true,
selectMode: 2,
keyPathSeparator: "/",
clones: {
highlightClones: true
},
select: function (event, data) {
var s = data.tree.getNodeByKey(data.node.key);
var s3 = s.key;
var s2 = $.map(data.tree.getSelectedNodes(), function (node) {//
return node.key;
});
if ($.inArray(s3, s2) == -1) {//
$("tr#" + s3).addClass("deleted");
//DESELECTED
$('table#tblID tr#' + s.key).remove();
alert(s.key + ' DESELECT');
}
else {
//SELECTED
alert(s.key + ' SELECT');
}
}
});
});
</script>
id should be unique in same document, use general class emplyee1 instead :
<div id="companyEmplyee">
<ul>
<li class="folder" id="company1">Company
<ul>
<li class="folder" id="sector1">Sector 1
<ul>
<li class="emplyee1">Emplyee 1</li>
<li id="emplyee2">Emplyee 2</li>
</ul>
</li>
<li class="folder" id="sector2">Sector 2
<ul>
<li class="emplyee1">Emplyee 1</li>
<li id="emplyee35">Emplyee 35</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Or use unique ids, like you see in fancytree documentation the key (Node id) should be unique :
Node id (must be unique inside the tree)
Update :
Try to use the following hack :
select: function (event, data) {
if(data.node.extraClasses!=''){
if( $(data.node.li).find('.fancytree-node').hasClass('fancytree-selected') )
$('.'+data.node.extraClasses).addClass('fancytree-selected');
else
$('.'+data.node.extraClasses).removeClass('fancytree-selected');
}
}
Working example.
hope this helps.
Duplicated Id are invalid in HTML, violates the spec and cause problems.
https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
Assign classes instead of ids.
As noted in the previous answers, duplicate node keys are not allowed in Fancytree (and duplicate IDs are not allowed in HTML as well).
Since it is a common scenario to have multiple object instances inside one tree, there is a concept of 'clones'.
Basically you include the clones extension and pass the employee ID as refKey instead of key, e.g.
<li data-refKey="emplyee1">Emplyee 1</li>
You also need to enable the extension:
$("#tree").fancytree({
extensions: ["clones"],
checkbox: true,
selectMode: 2,
...
After that, you can access related instances like so:
select: function(event, data) {
var nodes = data.node.getCloneList();
...
},
See here for details: https://github.com/mar10/fancytree/wiki/ExtClones
and example http://wwwendt.de/tech/fancytree/demo/sample-ext-clones.html

Invoking YUI's delegate method using jQuery

I have YUI2's delegate defined as
<div id="container">
<ul id="list">
<li id="li-1">List Item 1</li>
<li id="li-2">List Item 2</li>
<li id="li-3">List Item 3</li>
<li id="li-4">List Item 4</li>
<li id="li-5">List Item 5</li>
</ul>
</div>
<script>
var foo = function() {
alert("clicked");
};
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;
Event.delegate("container", "click", foo, "li");
// jQuery code
$("#li-5").click();
</script>
When I click on the li, alert shown, that is expected. But why the jQuery click() method does not work? Or what is the correct way to simulate the click() delegate?
I have prepare a Live URL for testing: http://jsfiddle.net/ngRvw/
Updates:
I need the alert automatically execute like this one: http://jsfiddle.net/ngRvw/3/ But I need to preserve the original YUI's delegate

Filtering content (jQuery)

HTML:
<div class="filter">
category 1
category 2
</div>
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-2">item 3</li>
<li class="category-2">item 4</li>
</ul>
What I want is for example clicking on 'category 1' link should hide all other category items from the list.
I understand jQuery's .filter() selector can be used but I'm not sure how to implement it for my purpose here.
Thanks for your help!
$('div.filter').delegate('a', 'click', function (event) {
$('ul.items li').hide().filter('.' + this.href.slice(this.href.indexOf("#") + 1)).show();
event.preventDefault();
});
Basically you'll be doing something like this: $('.items li').hide(); $('.category-1').show();
The first to hide all other menu items, the latter to show the selected ones :)
You can simply put it in the onclick of the <a> tag.

Categories

Resources