I have a dynamic table with some input field and button in each row. I want to pass each row individual value when i click the button. Can anyone help me how to do it?
HTML:
<tr v-for="(item, index) in items">
//other Data
<td><input v-model="item1"></td>
<td><input v-model="item2"></td></td>
<td><button #click="doSomething()">send</button></td>
</tr>
javascript:
methods: {
doSomething() {
//values from each input field
}
}
Just pass index as a parameter to the function.
<button #click="doSomething(index)">send</button>
then in the method
doSomething(index) {
//values from each input field
}
Related
$.fn.dataTable.ext.search.push(
function (settings, searchData, index, rowData, counter) {
var checked = $('input:checkbox[name="chk_box"]').is(':checked');
// If checked and Position column is blank don't display the row
if (checked &&searchData[1] ==='druk') {
return false;
}
// Otherwise display the row
return true;
});
Is it possible to hide a row after searching for a specific string? I have this function, now it is looking for the exact word and how to make it look for the string:
Sorry about that:Now he hides a rows with only the word "druk". I can't do it so that it hides a rows with a sequence of characters, e.g. "abcdruk"
<div class="formRight"> <label> <input class="checkbox" type="checkbox" name="chk_box" checked /> hide</label> </div> <table> <tbody> <tr class="line"> <td>druk1234</td> </tr> <tr class="line"> <td>abcd</td> </tr> <tr class="line"> <td>abcdruk</td> </tr </tr> </tbody> </table>
I tried to use the includes function for example,but I don't know how to apply it to my example:
const s1 = 'javascript';
const s2 = 'python';
console.log(s1.includes('script')); // true
console.log(s2.includes('script')); // false
console.log(s1.contains('java')) // ERROR! .contains is not a function
I am trying to filter a table that get data from api and I tried this solution but it doesnt work.
I couldnt find where the problem is and if I pass the search input event listener
and here is my table component :
<template>
<table class="mt-12 border-2 border-gray-600">
<thead>
<tr>
<th v-for="header in data.headers" :key="header" class="text-left border-l-2 border-gray-600 border-b-2 border-gray-600 bg-red-400 ">{{ header }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(rows, index) in data.rows" :key="index">
<td v-for="row in rows" :key="row" class="border-l-2 border-gray-600" >{{ row }}</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: {
data: Object,
default: {}
}
}
</script>
<style src="../assets/tailwind.css"/>
My question:
If anyone can help me to define my problem and solve this ?
Thanks for help.
You can use your data as computed where you pass it as a prop.
<BaseTable :data='data' />
Here instead of using like this create a computed which can be filteredData.
<BaseTable :data='filteredData' />
and in your props you can simply filter it or just send the data as it is.
computed: {
filteredData() {
if(this.search) {
// filter your data as you want and return
}
else // return your main data
}
}
Here is a working simple example:
https://codesandbox.io/s/filterlist-example-vdwhg?file=/src/App.vue
And change your include to includes.
what error you are getting ? I think you are using this.search inside filteredRows function which is not a vue instance property. it should be this.data.search. The search is used with V-model as well so you should declare it outside data (JSON object).
I have a table in which I add the input field dynamically and I set the validation manually by using Toastr notifications . what the problem is that when I add the input at the first time the validation is working perfectly but when I add another input the validation is not working on new added input. I have tried and searched for the solution but I did not find any solution.Any help will be highly appreciated.
My HTML code :
<table class="table-hover" id="form">
<thead>
<tr>
<th>پلورنکی</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, $index) in rows" :key="row.id">
<td>
<input
dir="rtl"
id="supplier_id1"
v-model="row.supplier_id1"
placeholder="نیټه "
type="text"
name="supplier_id1"
class="form-control"
/>
</td>
</tr>
</tbody>
</table>
<button
class="btn btn-success btn-xs"
#click="getData()"
>
خوندی کړی
</button>
My script code :
export default {
data() {
return {
rows: [
{
supplier_id1: "",
}
],
}
}
methods: {
getData: function() {
if (this.rows[0].supplier_id1 == "") {
toast.fire({
icon: "warning",
html: "<h5> supplier id is required.</h5>"
});
} else {
//if the input is not emptyexecute the coed successfully
}
}
}
}
You will always check for the first row, because of if (this.rows[0]...)
rows[0] will always take the first object in your array
If you always want to validate all the rows, you could check if there are any rows without a supplier id: if (this.rows.filter((row) => row.supplier_id1 === "").length)
I not sure which toast component did you used, but i can do similar mock for your validation message + databinding of your {{row.supplier_id1}}
v-model value of input[type="date] will only valid when you inputted date correctly so this.rows[0].supplier_id1.length == 0 to validate is fine. The reactivity is working fine.
My Working Fiddle: https://jsfiddle.net/bu9twps2/
UPDATE: Your original condition to validate works fine as well, problem likely lies at your toast
Because when updating the value of a variable in the method, it is not updated in the v-model of the view ?.
If I reload the page the method v-on: change ="reCalcTotal(index, art.stock_solicited)" works correctly, and updates the subtotal value every time "art.stock_solicited" changes.
But until I reload the page for the first time, the method does not modify the v-model in the view.
What alternative do I have to solve it?
HTML
<tr v-for="(art, index) in arGeneratedOrders" v-if="art.stock_solicited > 0">
<td>
$#{{ art.subtotal.toFixed(1) }}
<input type="text" v-model="art.subtotal">
</td>
<td>
<input type="number" v-model="art.stock_solicited" v-on:change="reCalcTotal(index, art.stock_solicited)">
</td>
</tr>
<tr>
<td>
Total: $#{{total.toFixed(2)}}
</td>
</tr>
js
data: {
arGeneratedOrders:''
},
computed: {
total(){
let total=0;
this.arGeneratedOrders.forEach(item => {
total += item.subtotal;
});
return total
}
},
methods: {
reCalcTotal: function(index, newStockSolicited) {
this.arGeneratedOrders[index].stock_solicited=newStockSolicited;
this.arGeneratedOrders[index].subtotal=(this.arGeneratedOrders[index].stock_solicited)*this.arGeneratedOrders[index].purchase_price,
localStorage.setItem('lsGeneratedOrders', JSON.stringify(this.arGeneratedOrders));
this.total;
alert('Index:'+index+' - New:'+newStockSolicited+' - ='+this.arGeneratedOrders[index].subtotal); //This alert shows the updated variables, but the values do not change in the view.
}
}
I m trying to add a dynamical input along with dropdown for that i m using vue-serach-select let me show my code then issue in detail
<template>
<button #click="addRow1"></button>
<table class="table table-striped">
<thead>
<tr style="font-size: 12px; text-align: center;">
<th class="span2" >Product Name</th>
<th class="span2" >Unit</th>
</tr>
</thead>
<tbody id="product_table_body">
<tr v-for="(row, index) in rows">
<td><model-list-select :list="productname"
option-value="product_name"
option-text="product_name"
v-model="row.selectproduct"
placeholder="Search Product Name"
#searchchange="searchprd3">
</model-list-select>
</td>
<td>
<input class="form-control-sm" type="text" v-model="row.new1" disabled="disabled" style="width: 100px;">
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
data () {
return {
productname3:[],
rows:[],
}
},
methods:{
addRow1(){
this.rows.push({})
},
searchprd3(search,index){
},
}
}
</script>
now if i click on button one more row is added with dropdown now my problem is that how i can differentiate productname according to dynamic create row i had tried like :list="productname{index},:list="productname.index but none of them worked and last thing i want to pass index parameter in searchprd3 function so i tried like this searchprd3(search,index) in function I m getting index but it throw error for search and if only pass index then also throw error however it work none of parameter is passed from select like this #searchchange="searchprd3" but in function i m not getting index value or is there anyother way to achieve this thing
updated
<tr v-for="(row, index) in rows">
<td><model-list-select :list="row.productname"
option-value="product_name"
option-text="product_name"
v-model="row.selectproduct"
placeholder="Search Product Name"
#searchchange="searchprd3">
</model-list-select>
</td>
</tr>
<script>
searchprd3(searchText,index){
var _this=this
this.$http.get('/api/companyproducts?filter[where][product_name][ilike]=%'+searchText+'%').then(function (response) {
_this.rows.push({productname:response.data})
}).catch(function (error) {
console.log("error.response");
});
},
</script>
i want select option list seprate for every row but my code throw error like "Cannot read property 'map' of undefined"
that is why row push not working for dynamic row is I m missing Something
update2
found my mistake
addRow1(){
this.rows.push({
productnamex:[],
unit:'',
qty:'',
amt:'',
cgst:'',
sgst:'',
igst:''})
},
problem is that i haven't initialize my dropdown at rows click now another problem is that why my drop not get populated
try like this
<template>
<model-list-select :list="row.productnamex"
option-value="product_name"
option-text="product_name"
v-model="row.selectproduct"
placeholder="Search Product Name"
#searchchange="searchprd3($event,index,row)" >
</model-list-select>
</template>
<script>
addRow1(){
console.log(this.rows)
this.rows.push({ productnamex:[],unit:'', qty:'',amt:'', cgst:'', sgst:'', igst:''})
},
searchprd3(searchText,index,row){
console.log(index)
var _this=this
console.log(row)
this.$http.get('/api/companyproducts?filter[where][product_name][ilike]=%'+searchText+'%').then(function (response) {
console.log(response.data)
row.productnamex=response.data
}).catch(function (error) {
console.log("error.response");
});
},
</script>
hope this will help you as well as other enjoy :D
you should be able to do:
:list="productname+index"
You need to manually pass the index into the callback together with the searchtext in order for your searchprd3 method to receive both values.
This is where the inline $event variable in your event listener comes into the action. The $event variable contains the value that is supposedly passed to your callback by the event.
So if you want to pass additional data into the callback aside from the data that is passed by the event, you can manually call the callback function and pass the $event together with the data that you want to pass which in this case, the index variable.
Your event listener should look like this:
#searchchange="searchprd3($event, index)"