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/
Related
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
}
}
}
This question already has answers here:
vue.js put focus on input
(5 answers)
Closed 2 years ago.
I have dynamic rows where it adds new row by clicking on button OR scan input success, now the issue is that I can't get focus on new row.
Demo
Code
To avoid confusion I've commented all lines in code.
Template
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<td><strong>Serial Number</strong></td>
<td width="50"></td>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in form.barcode_serial_number" :key="index">
<td>
<el-input ref="barcode" v-model="row.barcode_serial_number"></el-input>
</td>
<td>
<el-link v-on:click="removeElement(index);" style="cursor: pointer">Remove</el-link>
</td>
</tr>
</tbody>
</table>
<div>
<button type="button" class="button btn-primary" #click="addRow">Add row</button>
</div>
Script
data() {
return {
form: {
barcode_serial_number: [], //get data of all rows
},
}
},
created() {
//scanner
const eventBus = this.$barcodeScanner.init(this.onBarcodeScanned, { eventBus: true })
if (eventBus) {
eventBus.$on('start', () => {
this.loading = true;
console.log('start')
})
eventBus.$on('finish', () => {
this.loading = false;
console.log('finished')
// add new row when scan succeed
this.$nextTick(function () {
this.form.barcode_serial_number.push({
barcode_serial_number: ''
});
})
})
}
},
methods: {
// add autofocus to new row
focusInput() {
this.$refs.barcode.focus();
},
// add new row by clicking button
addRow: function() {
var barcodes = document.createElement('tr');
this.form.barcode_serial_number.push({
barcode_serial_number: ''
});
},
// remove row by clicking button
removeElement: function(index) {
this.form.barcode_serial_number.splice(index, 1);
},
}
Question
How do I set autofocus on newly added rows?
At the moment the new serial_number is inserted the DOM is not updated so we cant focus it.
We need to use nextTick to run a function when the DOM is updated.
Vue.config.devtools = false;
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
data: {
form: {
barcode_serial_number: []
}
},
methods: {
addRow() {
this.form.barcode_serial_number.push({
barcode_serial_number: ''
});
this.$nextTick(() => {
const nbBarcodes = this.$refs.barcode.length;
this.$refs.barcode[nbBarcodes - 1].focus();
});
},
removeElement(index) {
this.form.barcode_serial_number.splice(index, 1);
},
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table>
<thead>
<tr>
<td><strong>Serial Number</strong></td>
<td width="50"></td>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in form.barcode_serial_number" :key="index">
<td>
<input ref="barcode" v-model="row.barcode_serial_number"></input>
</td>
<td>
<button v-on:click="removeElement(index);">Remove</button>
</td>
</tr>
</tbody>
</table>
<div>
<button #click="addRow">Add row</button>
</div>
</div>
I am trying to update the products price and total cost based on any products quantity getting changed which is done via a text field which has minimum and maximum quantities.Sp when the quantity changes,i will get the updated quantity and price for that product on the backend and update it appropriately on the frontend.So i tried to use an anonymous function and pass the parameters to another function but i get an error saying that e.target.value is undefined.Here is the code i have written/tried so far.
import React from 'react'
import App from './App'
import Cookies from 'universal-cookie'
import './view_cart.css'
import {ToastContainer, toast,style} from 'react-toastify'
var hiding='';
class View_cart extends React.Component
{
constructor(props)
{
super(props);
this.state={item_list:{},"total_items_price":'',product_count:''}
this.view_cart_details=this.view_cart_details.bind(this)
this.delete_item_cart=this.delete_item_cart.bind(this)
this.product_state=this.product_state.bind(this)
}
registeration_notification(value_to_render)
{
toast(value_to_render,
{
//position: toast.POSITION.BOTTOM_CENTER,
autoClose: 3000,
}
);
}
product_state(e,product_name,manufacturer)
{
this.setState({"product_count":e.target.value})
console.log(this.state.product_count)
console.log(product_name,manufacturer)
}
display_cart()
{
//console.log(Object.keys(this.state.item_list))
const mapping = Object.keys(this.state.item_list).map((item,id) =>
{
console.log(this.state.item_list[item]['image_path'])
var location = require('./Images/'.concat(this.state.item_list[item]['image_path']))
//console.log(location)
return (
<div>
<div className="container">
<table id="cart" className="table table-hover table-condensed">
<thead>
<tr>
<th style={{width:50}}>Product</th>
<th style={{width:10}}>Price</th>
<th style={{width:8}}>Quantity</th>
<th style={{width:22}} className="text-center">Subtotal</th>
<th style={{width:10}}></th>
</tr>
</thead>
<tbody>
<tr>
<td data-th="Product">
<div className="row">
<div className="col-sm-2 hidden-xs"><img src={location} alt="..." className="img-responsive"/></div>
<div className="col-sm-8">
<h4 className="nomargin">{this.state.item_list[item]["Name"]} {'by '.concat(this.state.item_list[item]["manufacturer"])}</h4>
</div>
</div>
</td>
<td data-th="Price">{this.state.item_list[item]["original_price"]}</td>
<td data-th="Quantity">
<input type="number" min="1" max="10" value={this.state.product_count} onChange={(e) => this.product_state(this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'],e)} placeholder="Min 1 Max 10" className="form-control text-center"/>
</td>
<td data-th="Subtotal" className="text-center">{this.state.item_list[item]['price']}</td>
<td className="actions" data-th="">
<button className="btn btn-danger btn-sm" style ={{hiding}} onClick={() =>this.delete_item_cart(this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'])}><i className="fa fa-trash-o"></i></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
)
})
return mapping
}
sample_string()
{
console.log("ONCLICK WORKING")
}
sample_cookie_output()
{
const test_cookie_testing = new Cookies();
var auth_string='Token '
console.log((auth_string.concat(test_cookie_testing.get('Authorization'))),typeof((auth_string.concat(test_cookie_testing.get('Authorization')))))
return (auth_string.concat(test_cookie_testing.get('Authorization')))
}
delete_item_cart(product_name_delete,manufacturer_name)
{
fetch('http://127.0.0.1:8000/delete_item_cart/',
{
method:"POST",
headers:
{
'Content-Type':"application/json",
"Accept":"application/json",
"Authorization":this.sample_cookie_output()
},
body:JSON.stringify({"product_name":product_name_delete,"manufacturer":manufacturer_name})
})
.then(something =>something.json())
.then(findResponse =>
{
console.log(findResponse,typeof(findResponse))
if((Object.keys(findResponse).length)===1 && (Object.keys(findResponse).includes("Data Deletion")))
{
hiding='displayNone';
console.log(hiding)
//console.log("A user with this name already exists.")
this.registeration_notification("The Product has been removed from the cart")
}
}
)
}
view_cart_details()
{
fetch('http://127.0.0.1:8000/view_cart/',
{
method:"GET",
headers:
{
'Content-Type':"application/json",
"Accept":"application/json",
"Authorization":this.sample_cookie_output()
},
})
.then(something =>something.json())
.then(findResponse =>
{
console.log(findResponse)
this.setState({"item_list":findResponse[0],"total_items_price":findResponse[1]})
}
)
}
componentDidMount(){
this.view_cart_details()
}
render(){
return (
<div>
<App/>
{this.display_cart()}
<button onClick={this.delete_item_cart}>Test Button</button>
<ToastContainer/>
</div>
)
}
}
export default View_cart
You are passing the e parameter at third place and in the function you are trying to access it from the first parameter. Pass e as first parameter
onChange={(e) => this.product_state(e, this.state.item_list[item]['Name'],this.state.item_list[item]['manufacturer'])}
Try this
<button onClick={(e) => this.delete_item_cart(e)}>Test Button</button>
Change e param position
product_state(e,product_name,manufacturer)
to
product_state(product_name,manufacturer,e)
I have an input search field and a div, in that div is a table that I can search through with the input search field;
$(document).on("click", '#zoekenbtn', function (event) {
$("#zoekenpanel").toggle('slide', { direction: 'left' });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="zoekenbtn" type="search" placeholder="🔎"/>
<div class="zoekdiv">
<input type="button" class="zoekclose" value="X" />
<div class="zoektablediv">
<table class="zoektable">
<tr id="myhead">
<th>
Klant
</th>
<th>
Locatie
</th>
<th>
Plaats
</th>
</tr>
#foreach (var temp in Model.Select(x => new { x.Id, x.Klant, x.Locatie, x.Plaats }))
{
<tr name="sysinfo" itemscope itemid="#temp.Id" class="info" data-url="#Url.Action("searchresult", "Klanten", new { id = temp.Id})">
<td>
#temp.Klant
</td>
<td>
#temp.Locatie
</td>
<td>
#temp.Plaats
</td>
</tr>
}
</table>
</div>
<input id="zoekenbtn" type="search" placeholder="🔎"/>
but this causes a problem; if you click on the input and click somewhere else. you're no longer focussed on the input, thus you can't type in it anymore. so you have to click it again to be able to type. which toggles the div again and closes it.
I need a way so that it doesn't toggle, but slides open from left to right.
Thank you :)
add
$(document).keypress(function() {
$("#zoekenbtn").focus();
});
it would capture the keystroke and focus in you input field
$(document).on("click", '#zoekenbtn', function (event) {
$("#zoekenpanel").toggle('slide', { direction: 'left' });
});
$(document).keypress(function() {
$("#zoekenbtn").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="zoekenbtn" type="search" placeholder="🔎"/>
<div class="zoekdiv">
<input type="button" class="zoekclose" value="X" />
<div class="zoektablediv">
<table class="zoektable">
<tr id="myhead">
<th>
Klant
</th>
<th>
Locatie
</th>
<th>
Plaats
</th>
</tr>
#foreach (var temp in Model.Select(x => new { x.Id, x.Klant, x.Locatie, x.Plaats }))
{
<tr name="sysinfo" itemscope itemid="#temp.Id" class="info" data-url="#Url.Action("searchresult", "Klanten", new { id = temp.Id})">
<td>
#temp.Klant
</td>
<td>
#temp.Locatie
</td>
<td>
#temp.Plaats
</td>
</tr>
}
</table>
</div>
I found what I wanted, I succeeded by adding
$(document).on("click", '#zoekenbtn', function (event) {
if ($('#zoekenpanel').is(":hidden")) {
$("#zoekenpanel").toggle('slide', { direction: 'left' });
}
});
This way the slideToggle won't toggle while the panel is open :)
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