We Keep Coding

Vuejs strange behavior when a list of checkboxes are updated

Well, it's not easy to explain.
I have a list of checkboxes generated from reactive data. When you check one of the checkboxes, one of the entries of the reactive data is deleted.
The list is then updated.
The next checkbox is then placed under the mouse cursor and is "activated" by releasing the mouse button. This behavior is unwanted, can you see a way to avoid this?
Here is the code to illustrate this case:
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos">
<label>
<input type="checkbox"
v-on:change="toggle">
{{ todo.text }}
</label>
</li>
</ol>
</div>
Script part:
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript" },
{ text: "Learn Vue" },
{ text: "Play around in JSFiddle" },
{ text: "Build something awesome" }
]
},
methods: {
toggle: function(){
this.todos.splice(1,1)
}
}
})
Also a live test: https://jsfiddle.net/m10jyLut/7/
I don't know if my design is correct. I would like to avoid a too hackneyed solution.
Thank you very much for your guess.

I added "key" to v-for, which is always a good idea, and passing todo.id with toggle().
<div id="app">
<h2>Todos:</h2>
<ol>
<li v-for="todo in todos" :key="todo.id">
<label>
<input type="checkbox"
v-on:change="toggle(todo.id)">
{{ todo.text }}
</label>
</li>
</ol>
</div>
Your script tag should be like this:
new Vue({
el: "#app",
data: {
todos: [
{ id: Math.random() * 100000, text: "Learn JavaScript", },
{ id: Math.random() * 100000, text: "Learn Vue", },
{ id: Math.random() * 100000, text: "Play around in JSFiddle", },
{ id: Math.random() * 100000, text: "Build something awesome", }
]
},
methods: {
toggle(id) {
this.todos = this.todos.filter(todo => todo.id !== id)
}
}
})
In Vue.js, it's always a good idea to add key to v-for, and working with ids for rendering operations.

Clearing Text Fields on button click in Vue.js?

I have a layout on which i am looping to get text fields and a button. How do i add a function on the button so that it clears only it's respective fields.
Check out the fiddle here.
<div id="app">
<h2>Each text with it's own state and clear should clear the respective
text fields</h2>
<ul v-for="todo in todos">
<li>
<input type="text" :placeholder="`${todo.text}`">
</li>
<li>
<input type="text" :placeholder="`${todo.text1}`">
</li>
<button>Clear</button>
</ul>
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript", text1:"Hey" },
{ text: "Learn Vue", text1:"Hello" },
{ text: "Play around in JSFiddle", text1:"Ciao" },
{ text: "Build something awesome", text1:"Something"}
]
}
})

If you want to clear a specific fields you could add a method clear which takes the index as parameter but before that you should add value and value1 items to each todo and bind them to fields as follows:
new Vue({
el: "#app",
data: {
todos: [{
text: "Learn JavaScript",
text1: "Hey",
value1:'',
value:''
},
{
text: "Learn Vue",
text1: "Hello",
value1:'',
value:''
},
{
text: "Play around in JSFiddle",
text1: "Ciao",
value1:'',
value:''
},
{
text: "Build something awesome",
text1: "Something",
value1:'',
value:''
}
]
},
methods:{
clear(i){
this.todos[i].value='';
this.todos[i].value1='';
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<h2>Each text with it's own state and clear should clear the respective text fields</h2>
<ul v-for="(todo,i) in todos">
<li>
<input type="text" :placeholder="`${todo.text}`" v-model="todo.value">
</li>
<li>
<input type="text" :placeholder="`${todo.text1}`" v-model="todo.value1">
</li>
<button #click="clear(i)">Clear</button>
</ul>
</div>

You really should go through the docs at https://v2.vuejs.org/v2/
You are missing many of the basic constructors to achieve your objective. First, you will need to add the click event to your button. (https://v2.vuejs.org/v2/guide/events.html)
Next, you will need to reference the index of the todos during rendering (https://v2.vuejs.org/v2/guide/list.html)
From here you can create a simple method called clear:
new Vue({
el: "#app",
data: {
todos: [
{ text: "Learn JavaScript", text1:"Hey" },
{ text: "Learn Vue", text1:"Hello" },
{ text: "Play around in JSFiddle", text1:"Ciao" },
{ text: "Build something awesome", text1:"Something"}
]
},
methods: {
clear (index) {
// Allows for unlimited keys
for (let key in this.todos[index]) {
this.$set(this.todos[index], key, null);
}
}
}
})
Notice that in the clear method I am ensuring reactivity by using the $set method (https://v2.vuejs.org/v2/api/#vm-set) and referencing the index that was passed.
Lastly, I bound the inputs value to the todo model using Vue's v-model, do I get extra credit? (https://v2.vuejs.org/v2/api/#v-model)
Completed code:
https://jsfiddle.net/cdsgu62L/10/

Kendo dropdownlist databound is called before dropdown item is set from the model

I have recently started learning KendoUI and have come up with this issue. I am trying to include a dropdownlist in kendo grid using MVVM approach. The grid has 3 columns- Checkbox, text and dropdownlist. I want to manually set the dropdownlist value based on whether the checkbox is checked or not. As an example here i am trying to set the Class as 'Class 3' if checkbox is unchecked. Even though index is set to 2, it gets reverted back to the class from the model at the end of the event dataBound. Can anyone help me with this? I need to forcefully set the dropdown index. Thank you.
<script type="text/x-kendo-template" id="checkboxGrid">
<input type="checkbox" data-bind="checked: IsChecked" />
</script>
<script type="text/x-kendo-template" id="ddlGrid">
<input data-role="dropdownlist"
data-auto-bind="true"
data-text-field="name"
data-value-field="id"
data-auto-bind="true"
data-bind="source: actionSource, value: class, events:{dataBound: dataBound }"/>
</script>
<div id="content" >
<div id="my-grid"
data-role="grid"
data-sortable="true"
data-selectable="true"
data-columns='[
{"field": "IsChecked", "title":" ", template: kendo.template($("#checkboxGrid").html())},
{"field": "Name", "title":"Name" },
{"field": "class", "title":"Class", template: kendo.template($("#ddlGrid").html())}
]'
data-bind="source: dataSource">
</div>
</div>
<script>
$(document).ready(function() {
var viewModel = new kendo.data.ObservableObject({
dataSource: [
{ IsChecked: true, Name: "Student 1", class: { name: "Class 1", id:"1" }},
{ IsChecked: false, Name: "Student 2", class: { name: "-Please Select-", id:"999" } },
{ IsChecked: false, Name: "Student 3", class: { name: "-Please Select-", id:"999" }},
{ IsChecked: true, Name: "Student 4", class: { name: "Class 3", id:"3" } }
],
actionSource: [
{ name: "-Please Select-", id:"999"},
{ name: "Class 1", id:"1" },
{ name: "Class 2", id:"2" },
{ name: "Class 3", id:"3" }
],
dataBound: function(e) {
var ddl = e.sender;
var gridRow = $(ddl.element).closest( "tr" );
var checkbox = $(gridRow).find('input[type=checkbox]');
debugger;
if(checkbox.prop("checked") == false){
console.log("Checkbox checked : " + false);
//explicitly trying to set class to 'Class 3'
ddl.select(2);
debugger;
}
//Even though index is set to 2, it gets reverted back to the class from the model at the end of the event
}
});
kendo.bind($('#my-grid'), viewModel);
});
</script>

Angular select all checkboxes from outside ng-repeat

Description
I have a small product order system, where a user can add order lines, and on each order line add one or more products. (I realise it's quite unusual for more than one product to be on the same order line, but that's another issue).
The products that can be selected on each line is based on a hierarchy of products. For example:
Example product display
T-Shirts
V-neck
Round-neck
String vest
JSON data
$scope.products = [
{
id: 1,
name: 'T Shirts',
children: [
{ id: 4, name: 'Round-neck', children: [] },
{ id: 5, name: 'V-neck', children: [] },
{ id: 6, name: 'String vest (exclude)', children: [] }
]
},
{
id: 2,
name: 'Jackets',
children: [
{ id: 7, name: 'Denim jacket', children: [] },
{ id: 8, name: 'Glitter jacket', children: [] }
]
},
{
id: 3,
name: 'Shoes',
children: [
{ id: 9, name: 'Oxfords', children: [] },
{ id: 10, name: 'Brogues', children: [] },
{ id: 11, name: 'Trainers (exclude)', children: []}
]
}
];
T-Shirts isn't selectable, but the 3 child products are.
What I'm trying to achieve
What I'd like to be able to do, is have a 'select all' button which automatically adds the three products to the order line.
A secondary requirement, is that when the 'select all' button is pressed, it excludes certain products based on the ID of the product. I've created an 'exclusion' array for this.
I've set up a Plunker to illustrate the shopping cart, and what I'm trying to do.
So far it can:
Add / remove order lines
Add / remove products
Add a 'check' for all products in a section, excluding any that are in the 'exclusions' array
The problem
However, although it adds the check in the input, it doesn't trigger the ng-change on the input:
<table class="striped table">
<thead>
<tr>
<td class="col-md-3"></td>
<td class="col-md-6"></td>
<td class="col-md-3"><a ng-click="addLine()" class="btn btn-success">+ Add order line</a></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="line in orderHeader.lines">
<td class="col-md-3">
<ul>
<li ng-repeat="product in products" id="line_{{ line.no }}_product_{{ product.id }}">
{{ product.name }} <a ng-click="selectAll(product.id, line.no)" class="btn btn-primary">Select all</a>
<ul>
<li ng-repeat="child in product.children">
<input type="checkbox"
ng-change="sync(bool, child, line)"
ng-model="bool"
data-category="{{child.id}}"
id="check_{{ line.no }}_product_{{ child.id }}"
ng-checked="isChecked(child.id, line)">
{{ child.name }}
</li>
</ul>
</li>
</ul>
</td>
<td class="col-md-6">
<pre style="max-width: 400px">{{ line }}</pre>
</td>
<td class="col-md-3">
<a ng-click="removeLine(line)" class="btn btn-warning">Remove line</a>
</td>
</tr>
</tbody>
</table>
Javascript
$scope.selectAll = function(product_id, line){
target = document.getElementById('line_'+line+'_product_'+product_id);
checkboxes = target.getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
category = checkboxes[i].dataset.category;
if($scope.excluded.indexOf(parseInt(category)) == -1)
{
checkboxes[i].checked = true;
// TODO: Check the checkbox, and set its bool parameter to TRUE
}
}
}
}
Update with full solution
There were a couple of issues with the above code. Firstly, I was trying to solve the problem by manipulating the DOM which is very much against what Angular tries to achieve.
So the solution was to add a 'checked' property on the products so that I can track if they are contained on the order line, and then the view is updated automatically.
One drawback of this method is that the payload would be significantly larger (unless it is filtered before being sent to the back-end API) as each order line now has data for ALL products, even if they aren't selected.
Also, one point that tripped me up was forgetting that Javascript passes references of objects / arrays, not a new copy.
The solution
Javascript
var myApp = angular.module('myApp', []);
myApp.controller('CartForm', ['$scope', function($scope) {
var inventory = [
{
id: 1,
name: 'T Shirts',
checked: false,
children: [
{ id: 4, name: 'Round-neck', checked: false, children: [] },
{ id: 5, name: 'V-neck', checked: false, children: [] },
{ id: 6, name: 'String vest (exclude)', checked: false, children: [] }
]
},
{
id: 2,
name: 'Jackets',
checked: false,
children: [
{ id: 7, name: 'Denim jacket', checked: false, children: [] },
{ id: 8, name: 'Glitter jacket', checked: false, children: [] }
]
},
{
id: 3,
name: 'Shoes',
checked: false,
children: [
{ id: 9, name: 'Oxfords', checked: false, children: [] },
{ id: 10, name: 'Brogues', checked: false, children: [] },
{ id: 11, name: 'Trainers (exclude)', checked: false, children: []}
]
}
];
$scope.debug_mode = false;
var products = angular.copy(inventory);
$scope.orderHeader = {
order_no: 1,
total: 0,
lines: [
{
no: 1,
products: products,
total: 0,
quantity: 0
}
]
};
$scope.excluded = [6, 11];
$scope.addLine = function() {
var products = angular.copy(inventory);
$scope.orderHeader.lines.push({
no: $scope.orderHeader.lines.length + 1,
products: products,
quantity: 1,
total: 0
});
$scope.loading = false;
}
$scope.removeLine = function(index) {
$scope.orderHeader.lines.splice(index, 1);
}
$scope.selectAll = function(product){
angular.forEach(product.children, function(item){
if($scope.excluded.indexOf(parseInt(item.id)) == -1) {
item.checked=true;
}
});
}
$scope.removeAll = function(product){
angular.forEach(product.children, function(item){
item.checked=false;
});
}
$scope.toggleDebugMode = function(){
$scope.debug_mode = ($scope.debug_mode ? false : true);
}
}]);
Click here to see the Plunker

You are really over complicating things first by not taking advantage of passing objects and arrays into your controller functions and also by using the DOM and not your data models to try to update states
Consider this simplification that adds a checked property to each product via ng-model
<!-- checkboxes -->
<li ng-repeat="child in product.children">
<input ng-model="child.checked" >
</li>
If it's not practical to add properties to the items themselves, you can always keep another array for the checked properties that would have matching indexes with the child arrays. Use $index in ng-repeat for that
And passing whole objects into selectAll()
<a ng-click="selectAll(product,line)">
Which allows in controller to do:
$scope.selectAll = function(product, line){
angular.forEach(product.children, function(item){
item.checked=true;
});
line.products=product.children;
}
With angular you need to always think of manipulating your data models first, and let angular manage the DOM
Strongly suggest reading : "Thinking in AngularJS" if I have a jQuery background?
DEMO

Why ng-change isn't fired when the checkbox is checked programatically?
It happens because
if($scope.excluded.indexOf(parseInt(category)) == -1)
{
checkboxes[i].checked = true;
// TODO: Check the checkbox, and set its bool parameter to TRUE
}
only affects the view (DOM). ng-change works alongside ngModel, which can't be aware that the checkbox really changed visually.
I suggest you to refer to the solution I provided at How can I get angular.js checkboxes with select/unselect all functionality and indeterminate values?, works with any model structure you have (some may call this the Angular way).

Nested menu using parent id in knockoutJs

I am try to create nested menu using given json data by the client.
Data :
var serverData = [
{
Id: "menuColorSearch",
Text: "Color search"
},
{
Id: "menuAncillaryProductMix",
Text: "Ancillary product mix"
},
{
Id: "menuDocuments",
Text: "Documents"
},
{
Id: "menuColorInfo",
ParentId: "menuDocuments",
Text: "Color info"
},
{
Id: "menuReports",
ParentId: "menuDocuments",
Text: "Reports"
},
{
Id: "menuMaintenance",
Text: "Maintenance"
},
{
Id: "menuPriceManagement",
ParentId: "menuMaintenance",
Text: "Price management"
}
];
I am trying like this :
var Menu = function(dept, all) {
var self = this;
this.id = dept.Id;
this.name = ko.observable(dept.Text);
this.parentId = dept.ParentId;
this.children = ko.observableArray();
ko.utils.arrayForEach(all || [], function(menu) {
if(menu.ParentId){
if (menu.ParentId === self.id) {
self.children.push(new Menu(menu, all));
}
}else{
new Menu(menu, all)
}
});
};
var ViewModel = function(data) {
this.root = new Menu(data[0], data);
};
$(function() {
ko.applyBindings(new ViewModel(serverData));
});
Templates :
<div data-bind="with: root">
<ul data-bind="template: 'deptTmpl'">
</ul>
</div>
<script id="deptTmpl" type="text/html">
<li>
<a data-bind="text: name"></a>
<ul data-bind="template: { name: 'deptTmpl', foreach: children }">
</ul>
</li>
</script>
problem is that its only work when 2nd and 3rd object has parent ID. i am trying something like it should make nested menu according to given json data. so id there is no parent id on object it should add on root. and if object has parent id it should add according to parent id.
Please help me to correct my code or guide me if these is another way to do this in KnockoutJS.
Thanks

This should help you http://jsfiddle.net/MCNK8/3/, the main idea is to rebuild main data array, by placing child inside parent
HTML
<script id="nodeTempl" type="text/html">
<li>
<a data-bind="text: Text"></a>
<ul data-bind="template: {name: nodeTemplate, foreach: children }"></ul>
</li>
</script>
<script id="nodeLeafTempl" type="text/html">
<li>
<a data-bind="text: Text"></a>
</li>
</script>
<ul data-bind="template: {name: nodeTemplate, foreach: children }"></ul>
Javascript (#see fiddle)
var serverData = [
{
Id: "menuColorSearch",
Text: "Color search"
},
{
Id: "menuAncillaryProductMix",
ParentId: 'menuColorSearch',
Text: "Ancillary product mix"
},
{
Id: "menuDocuments",
Text: "Documents"
},
{
Id: "menuColorInfo",
ParentId: "menuReports",
Text: "Color info"
},
{
Id: "menuReports",
ParentId: "menuDocuments",
Text: "Reports"
},
{
Id: "menuMaintenance",
ParentId: 'menuReports',
Text: "Maintenance"
},
{
Id: "menuPriceManagement",
ParentId: "menuMaintenance",
Text: "Price management"
}
];
function getNestedMenu(index, all) {
var root = all[index];
if(!root){
return all;
}
if(!all[index].children){
all[index].children = [];
}
for(var i = 0; i < all.length; i++){
//<infinity nesting?>
//put children inside it's parent
if(all[index].Id == all[i].ParentId){
all[index].children.push(all[i]);
all[i].used = true;
}
//this is needed for each item, to determine which template to use
all[index].nodeTemplate = function(node) {
return node.children.length > 0 ? 'nodeTempl' : 'nodeLeafTempl';
}
//</infinity nesting?>
}
return getNestedMenu(++index, all);
};
function getModel(data) {
var items = getNestedMenu(0, data);
//<remove duplicates, for infinity nesting only>
for(var i = 0; i < items.length; i++){
if(items[i].used){
items.splice(i, 1);
i--;
}
}
//</remove duplicates, for infinity nesting only>
//<build root item>
var model = {};
model.children = ko.observableArray(items);
model.nodeTemplate = function(node) {
return node.children.length > 0 ? 'nodeTempl' : 'nodeLeafTempl';
}
//</build root item>
console.log(items);
return model;
};
(function() {
//new ViewModel(serverData);
ko.applyBindings(getModel(serverData));
})();