Develop Reference

How can i delete a certain row from a table in VueJS

I am trying to delete a certain element from an array, that I display in a HTML-Table.
Here's the frontend:
HTML-table_frontend
I push the Data from the input into an array userData.
The HTML-Table is build within a v-forloop in VUEjs.
Upon Pressing a button, I want the dedicated function (e.g. deleteData()) to only be applied to the row that that button is in.
How can I tell the button what Array-Index it needs to target?
Here's the code snippets:
Table:
<table id="userData">
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Mobile Number</th>
<th>Action</th>
</tr>
<tr v-for="(userData, k) in userData" :key="k">
<td class="name">
<input readonly class="tableDisplay" type="text" v-model="userData.name" />
</td>
<td>
<input readonly class="tableDisplay" type="email" v-model="userData.email" />
</td>
<td>
<input readonly class="tableDisplay" type="number" v-model="userData.number" />
</td>
<td>
<button type='button' class="buttonRead" #click="readData" >Read</button>
<button type='button' class="buttonEdit" #click="editData">Edit</button>
<button type='button' class="buttonDelete" #click="deleteData">Delete</button>
</td>
</tr>
</table>
Javascript in the .vue:
<script>
export default {
data() {
return{
userData:[],
newUser: {
name: '',
email:'',
number:''
}
};
},
methods: {
customSubmit(){
this.userData.push(this.newUser)
this.newUser = {
name:'',
email:'',
number:''
}
console.log(this.userData)
},
}
}
</script>

example with passing index
<button type='button' class="buttonDelete" #click="deleteData(k)">Delete</button>
methods: {
deleteData(k) {
this.userData.splice(k, 1)
}
}
or passing object
<button type='button' class="buttonDelete" #click="deleteData(userData)">Delete</button>
methods: {
deleteData(userData) {
let index = this.userData.indexOf(userData)
this.userData.splice(index, 1)
}
}
UPD. readData
<button type='button' class="buttonRead" #click="readData(k)" >Read</button>
methods: {
readData (k) {
console.log(this.userData[k].name)
},
}
also change userData variable name
<tr v-for="(rowUser, k) in userData" :key="k">
in inputs
<input ... v-model="rowUser.name" />
live example https://jsfiddle.net/8v2cx4je/

How to filter data with checkbox in Vuejs with API?

I would like to filter data in table using checkbox and outoput data will be shown based on checked/unchecked, for example when i'm checked "Show All" will ouput all data, and when i'm unchecked then output only will show some data. but when i'm trying to do this, the result nothing changed when i'm checked
here for vue html:
<div class="col-md-8">
<input type="checkbox" id="checkboxOrder" v-model="checkedValue" value="Onloading Complete" >
<label for="checkboxOrder">Show All</label>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>code</th>
<th>price</th>
<th>status</th>
<th>transporter</th>
<th>driver</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in showOrderDetail" :key="index">
<td >{{Number(index)+1}}</td>
<td>{{item.code}}</td>
<td>{{formatNumber(item.invoice_price)}}</td>
<td :class="statusBackground(item)">
<template v-if="item.t_tour">
<span v-if="!_.isEmpty(item.t_tour.t_tour_detail)">
{{item.t_tour.t_tour_detail[0].status}}
</span>
<span v-else>Unproccess</span>
</template>
<span v-else>Unproccess</span>
</td>
<td class="bg-warning">{{item.m_transporter ? item.m_transporter.name : 'unproccess'}}</td>
<td>{{driver(item)}}</td>
<td><span class="btn btn-primary" #click="showModal(item.t_tour)"><i class="fas fa-search"></i></span></td>
</tr>
</tbody>
</table>
and my vue.js :
import axios from "axios";
import accounting from "accounting";
import ShowTourDetail from "~/pages/transaction/order/ShowTourDetail";
export default {
props: {
rowData: {
type: Object,
required: true
},
rowIndex: {
type: Number
}
},
data() {
return {
t_order_detail: {},
checkedValue:[]
};
},
mounted() {
this.fetchData();
},
computed:{
showOrderDetail(){
if(!this.checkedValue.length)
return this.t_order_detail
return this.t_order_detail.filter(o => this.checkedValue.includes(o.t_tour.t_tour_detail[0].status))
}
},
methods: {
async fetchData() {
this.t_order_detail = {
...(
await axios.get(`/api/order-details`, {
params: { t_order_id: this.rowData.id }
})
).data
};
}
};

You can apply change method like :
<input type="checkbox" :value="mainCat.merchantId" id="mainCat.merchantId" v-model="checkedCategories" #change="check($event)">
Methos like:
methods: {
check: function(e) {
if(e.target.checked){
console.log("load all data using service");
// service call here
}else{
console.log("load required data using service");
// service call here
}
}
}

Duplicated form after click button add

Anybody help me, I have these working code currently:
HTML:
<body ng-controller="ExampleCtrl">
<label>Category:</label>
<select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
</label><br/><br />
<table class="table" ng-repeat="attr in product.category.templateAttribute">
<thead>
<tr>
<th colspan="4">{{attr.attribute}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td>
<input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file"/>
</td>
</tr>
</tbody>
</table>
JS
function ExampleCtrl($scope){
$scope.categories = [
{
name:'custom',
templateAttribute: [
{attribute: 'material'},
{attribute: 'soles'},
{attribute: 'size'}
]
}
];
$scope.products = [
{
name: 'custom',
category: {
name:'custom',
templateAttribute: [
{
type: "string",
attribute: "material"
},
{
type: "string",
attribute: "soles"
},
{
type: "string",
attribute: "size"
}
]
}
}
];
// add menu item
$scope.addItem = function(list, item){
list.push(angular.copy(item));
item = {};
};
// remove menu item
$scope.removeItem = function(list, index){
list.splice(index ,1);
};
}
angular
.module('app', [])
.controller("ExampleCtrl", ExampleCtrl)
For a demo :
Seet Demo
My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. How to fix my problem?

item should be defined as {} before pushing in list array.
If you do not want to send any model data through view then there is no point of sending attr argument to controller
Try this:
// Code goes here
function ExampleCtrl($scope) {
$scope.categories = [{
name: 'custom',
templateAttribute: [{
attribute: 'material'
}, {
attribute: 'soles'
}, {
attribute: 'size'
}]
}];
$scope.products = [{
name: 'custom',
category: {
name: 'custom',
templateAttribute: [{
type: "string",
attribute: "material"
}, {
type: "string",
attribute: "soles"
}, {
type: "string",
attribute: "size"
}]
}
}];
// add menu item
$scope.addItem = function(list, item) {
item = {};
list.push(angular.copy(item));
};
// remove menu item
$scope.removeItem = function(list, index) {
list.splice(index, 1);
};
}
angular
.module('app', [])
.controller("ExampleCtrl", ExampleCtrl)
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="ExampleCtrl">
<h3>How to fix this</h3>
<p>My problem is when I fill out one form above and click on the add button, it will display a new form, but that form always has the same value. Demo:</p>
<label>Category:
<select ng-model="product.category" ng-options="category as category.name for category in categories"></select>
</label>
<br/>
<br />
<table class="table" ng-repeat="attr in product.category.templateAttribute">
<thead>
<tr>
<th colspan="4">{{attr.attribute}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input value="{{attr.attribute}}" />
</td>
<td>
<input placeholder="name" ng-model="product.attributes[attr.attribute].name" />
</td>
<td>
<input placeholder="additional price" ng-model="product.attributes[attr.attribute].additionalPrice" />
</td>
<td rowspan="2">
<button type="button" ng-click="addItem(product.category.templateAttribute, attr)">
add
</button>
</td>
</tr>
<tr>
<td colspan="3">
<input type="file" class="form-control" ng-model="product.attributes[attr.attribute].file" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Codepen demo

Differentiating current textbox value from old one and showing in Angular JS

My code is like this
<body>
<div>
<table ng-app='myApp' ng-controller="MainCtrl">
<thead></thead>
<tbody ng-repeat="prdElement in palletElement track by $index">
<tr>
<td>{{prdElement.name}}</td>
</tr>
<tr ng-repeat="data in prdElement.Data">
<td>{{data.itemId}}</td>
<td>{{data.shipmentId}}</td>
<td>{{data.itemCode}}</td>
<td>{{data.description}}</td>
<td>{{data.handlingUnit}}</td>
<td>{{data.weight}}</td>
<td>{{data.class}}</td>
<td>{{data.lenght}}</td>
<td>{{data.width}}</td>
<td>{{data.height}}</td>
<td>{{data.flag}}</td>
<td>
<input type="text" ng-model="data.quantity" placeholder=" Code" required />
</td>
</tr>
<tr>
<td>
<button ng-click="newPalletItem( prdElement,$event)">Submit</button>
</td>
</tr>
<!--<tr id="displayitems" >
<td>
{{palletElement}}
</td>
</tr>-->
</tbody>
</table>
</div>
(function () {
angular.module('myApp', []).controller('MainCtrl', function ($scope) {
var counter = 0;
$scope.palletElement = [{
name: 'Pallet 1',
Data: [{
name: 'item 1',
itemId: '284307',
shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
itemCode: '',
description: 'Bicycle parts - frame',
quantity: '31',
handlingUnit: 'CTN',
weight: '613.04',
class: '',
lenght: '102',
width: '42',
height: '61',
flag: 'P'
}, {
name: 'item 2',
itemId: '284308',
shipmentId: 'eb44f690-c97a-40e3-be2a-0449559e171a',
itemCode: '',
description: 'Bicycle parts - fork',
quantity: '22',
handlingUnit: 'CTN',
weight: '242.99',
class: '',
lenght: '75',
width: '34',
height: '18',
flag: 'P'
}]
}]
$scope.newPalletItem = function (palletElement, $event) {
counter++;
$scope.palletElement.push(palletElement);
}
});
}());
When some one changes the value in last column textbox and press submit button I want to calculate [preloded value in textbox - (minus) current value in that text box ] and show it in next row. So far I have managed to duplicate the entire data completely to next row. but have no Idea in how to achieve rest. Can any one pint out a solution.
Fiddle
More details from Fiddle: as you can see current value is first text box is 31 if some one changes it to 10 when I duplicate the row to bottom I want that new textbox value to be shown as 21 (which is 31-10).

Please see here: http://jsfiddle.net/8r8cxcup/
newPalletImte:
$scope.newPalletItem = function (palletElement, $event) {
var npalletElement = {};
angular.copy(palletElement, npalletElement);
counter++;
angular.forEach(npalletElement.Data, function (row) {
if (row.quantity != row.newquantity) {
row.quantity = row.quantity - row.newquantity;
}
});
$scope.palletElement.push(npalletElement);
};
});
HTML:
<table ng-app='myApp' ng-controller="MainCtrl">
<thead></thead>
<tbody ng-repeat="prdElement in palletElement track by $index">
<tr>
<td>{{prdElement.name}}</td>
</tr>
<tr ng-repeat="data in prdElement.Data" ng-init="data.newquantity = data.quantity">
<td>{{data.itemId}}</td>
<td>{{data.shipmentId}}</td>
<td>{{data.itemCode}}</td>
<td>{{data.description}}</td>
<td>{{data.handlingUnit}}</td>
<td>{{data.weight}}</td>
<td>{{data.class}}</td>
<td>{{data.lenght}}</td>
<td>{{data.width}}</td>
<td>{{data.height}}</td>
<td>{{data.flag}}</td>
<td>
<input type="text" ng-model="data.newquantity" placeholder=" Code" required />
</td>
</tr>
<tr>
<td>
<button ng-click="newPalletItem( prdElement,$event)">Submit</button>
</td>
</tr>
<!--<tr id="displayitems">
<td>
{{palletElement}}
</td>
</tr>-->
</tbody>
</table>

How to display only selected records in the result table

There are two tables using the same source. These tables are using source binding of kendo templates. At present the source for both these tables are employees. Both these tables are displaying the same data.
Now, we need to modify it to show only check-box selected records in the result table. Also, when user clicks on the delete button on the result table, the check-box should be un-selected in the section table.
What modification do we need to do to make it work in MVVM?
Head
<head>
<title>MVVM Test</title>
<script type="text/javascript" src="lib/kendo/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/kendo/js/kendo.web.min.js"></script>
<!----Kendo Templates-->
<script id="row-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td><button type="button" data-bind="click: deleteEmployee">Delete</button></td>
</tr>
</script>
<script id="selection-table-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<input type="checkbox" name="selection" value="a">
</td>
</tr>
</script>
<!--MVVM Wiring using Kendo Binding-->
<script type="text/javascript">
$(document).ready(function () {
kendo.bind($("body"), viewModel);
});
</script>
</head>
MVVM
<script type="text/javascript">
var viewModel = kendo.observable({
// model definition
employees: [
{ name: "Lijo", age: "28" },
{ name: "Binu", age: "33" },
{ name: "Kiran", age: "29" }
],
personName: "",
personAge: "",
//Note: Business functions does not access any DOM elements using jquery.
//They are referring only the objects in the view model.
//business functions (uses "this" keyword - e.g. this.get("employees"))
addEmployee: function () {
this.get("employees").push({
name: this.get("personName"),
age: this.get("personAge")
});
this.set("personName", "");
this.set("personAge", "");
},
deleteEmployee: function (e) {
//person object is created using "e"
var person = e.data;
var employees = this.get("employees");
var index = employees.indexOf(person);
employees.splice(index, 1);
}
});
</script>
Body
<body>
<table id="selectionTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody data-template="selection-table-template" data-bind="source: employees">
</tbody>
</table>
<br />
<hr />
<table id="resultTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</thead>
<!--The data-template attribute tells Kendo UI that the employees objects should be formatted using a Kendo UI template. -->
<tbody data-template="row-template" data-bind="source: employees">
</tbody>
</table>
</body>
REFERENCES
set method - ObservableObject - Kedo API Reference
set method - kendo Model - Kedo API Reference
Filtering source in a Kendo Template
Kendo-UI grid Set Value in grid with Javascript

First things first.
If you remove the object from the viewModel when you delete it, it will be removed from your source table as well. You would need two arrays to handle this if you wanted it to be the way you describe. But based on the first part of your question, I thought I would post a solution.
HTML
<script id="row-template" type="text/x-kendo-template">
<tr data-bind="visible: isChecked">
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<button type="button" data-bind="click: deleteEmployee">Delete</button>
</td>
</tr>
</script>
<script id="selection-table-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<input type="checkbox" name="selection" data-bind="checked: isChecked"/>
</td>
</tr>
</script>
<table id="selectionTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-template="selection-table-template" data-bind="source: employees"/>
</table>
<br />
<hr />
<table id="resultTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: employees"/>
</table>
JAVASCRIPT
var viewModel = kendo.observable({
employees: [
{ name: "Lijo", age: "28", isChecked: true },
{ name: "Binu", age: "33", isChecked: true },
{ name: "Kiran", age: "29", isChecked: true }
],
personName: "",
personAge: "",
addEmployee: function () {
this.get("employees").push({
name: this.get("personName"),
age: this.get("personAge")
});
this.set("personName", "");
this.set("personAge", "");
},
deleteEmployee: function (e) {
var person = e.data;
var employees = this.get("employees");
var index = employees.indexOf(person);
var employee = employees[index];
//set
employee.set('isChecked', false);
}
});
$(document).ready(function () {
kendo.bind($("body"), viewModel);
});
JSFiddle
Fiddle
Summary
Use data-bind="visible: isChecked" in "row-template" to show only selected records in the bottom table.
Make template for checkbox as
<input type="checkbox" name="selection" data-bind="checked: isChecked"/>
In the delete function, use following
employee.set('isChecked', false);

Use a dictionary to store [employee, boolean] to store employee and the checkbox state, and bind the dictionary to the view
Check this