Vue js: How to add a class to the closest td on click of Button - vue.js

I am new to Vue coming off of JS/JQuery. I have a table, and each row has 2 possible buttons and two inputs, all wrapped in <td>. When I click a button I want the nearest input to have a class added. In JQuery I would have used the closest method in selecting the neighbouring <td> Here is my Vue template syntax. Many thanks!
<tbody>
<tr v-for="child in registeredChildren">
<td class="col-2"><a :href="'/getchild/'+ child.child_id">{{child.childFirstName}}</a>&nbsp &nbsp {{child.childLastName}}</td>
<!--========TIME IN===========-->
<td class="col-3 pb-2"}"><input style="text-align:center;" class="form-control editChild initial" type="text" v-model="child.timeIn" ></td>
<td><button v-on:click="updateTimeIn(child)" class="btn btn-outline-success">Reset</button></td>
<!-- //========TIME Out ===========//-->
<td class="col-3 pb-2" ><input style="text-align:center;" class="form-control editChild" type="text" v-model="child.timeOut" ></td>
<td><button v-on:click="updateTimeOut(child)" class="btn btn-outline-success">Reset</button></td>
</tr>
</tbody>
Methods: I was thinking if I could add some code to the UpdateTimeIn and TimeOut methods, this could be an approach?
methods:{
updateTimeIn(child){
this.updatedChild = child;
console.log(child.child_id,child.timeIn)
axios.post('http://kidsclub.test/upDateChildTimeIn', {
child_id: child.child_id,
timeIn: child.timeIn,
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
},
**NB** I have the same for updateTimeOut

You are using Vue, which unlike jQuery, means the data should drive the DOM. In Vue, you don’t have to consider selecting certain dom nodes.
I used to switch from jQuery to Vue, too. I have provided a demo, hope you can find ideas in it.
<button #click="onClick">click me</button>
<div class="fixed-classes" :class="{'dynamic-class': isClick}"></div>
data() {
return {
isClick: false
};
},
methods: {
onClick() {
this.isClick = !this.isClick;
}
}
You can run it online through the code sandbox link: codesandbox
I updated the code based on the comments in the code sandbox.

Related

vue bootstrapTable cannot click v-on:click

i cannot click v-on:click after mounted .bootstrapTable()
but not used .bootstrapTable() it is normal to use v-on:click
Do I need to listen to any additional functions?
Or what kind of code should I write?
file.vue
<template>
<div>
<table id="table">
<tr>
<th>#</th>
</tr>
<tr v-for="(d, index) in data" :key="index">
<td><a class="btn btn-secondary" type="button" #click="callText(d.text)">{{d.text}}</a></td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: 'file',
data () {
return {
data: [{"text":'1'},{"text":'2'},{"text":'3'}]
}
},
methods: {
buildTable() {
$('#table').bootstrapTable('destroy').bootstrapTable({})
},
callText(t){
console.log(t);
}
},
mounted: function(){
this.buildTable();
}
}
</script>
You can, and it still works. Are you even looking at your console? The only problem is that the cursor is not changing to a pointer as with an actual button.

Datatable v-for to produce checkbox or input based on data

Wondering how I can get my datatable to build a column that produces either a checkbox or input based on a value from data. This is the what I have but I have a good feeling there is a way better way of doing this.
<div v-for=”shirt in shirts”>
<div v-if=”stock.shirts < 2”>
<td><input type="checkbox"></td>
</div>
<div v-else>
<td><input type="text"> of {{ props.item.shirts }}</td>
</div>
</div>
Any help would be greatly appreciated
reduce your if clause
<td v-for=”shirt in shirts”><input type="checkbox"></td>
<td v-else><input type="text"> of {{ props.item.shirts }}</td>
vue docs - Conditional Rendering
or you can use dynamic components, like so:
<template>
<td>
<component :is="component" :data="passthroughdata" />
</td>
</template>
//...
props: ["value", "passthroughdata"],
data() {
return {
component: {}
},
},
watch: {
value:{
handler: async function(){
try{
await import(`./components/${valueBasedComponent}/index.vue`)
this.component = () => import(`./${valueBasedComponent}/index.vue`)
} catch() {
this.component = () => import(`./${someDefaultComponent}/index.vue`)
}
},
// immediate: true
}
}
vue docs - Dynamic & Async Components

dynamically add input as well as dropdown in vuejs

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)"

vue.js does not correctly rerender compared to the vue instance object

I have a small issue with my vue template. The code is the following :
<template>
<div class="panel panel-default"
v-bind:id="'panel_'+noeud.id">
<div class="panel-heading">{{noeud.name}}</div>
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Noeud</th>
<th>Poid</th>
</tr>
</thead>
<tbody>
<tr
v-for="noeud_poids in weightSorted"
v-if="noeud_poids.macro_zonning_noeud_id_2 != noeud.id"
is="macrozonningproximitenoeudpoids"
:noeud_poids="noeud_poids"
:noeud="noeud"
:noeuds="noeuds"
:delete_callback="delete_final"
:change_callback="update_line">
</tr>
<tr>
<td>
<select v-model="new_noeud">
<option value=""></option>
<option v-for="one_noeud in noeuds "
v-bind:value="one_noeud.id">{{one_noeud.name}}</option>
</select>
</td>
<td>
<input type="text" v-model="new_weight">
</td>
<td>
<input type="button" class="btn btn-primary" #click="addNoeudProximite" value="Ajouter"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
props: ['pnoeud', 'pnoeuds'],
data: function(){
return {
points: 0,
points_restants: 100,
new_weight:0,
new_noeud:0,
noeud:this.pnoeud,
noeuds:this.pnoeuds,
weightSorted:this.pnoeud.weightSorted
}
},
mounted() {
},
methods:{
delete_final(macro_zonning_noeud_id_2){
axios.delete("/macrozonning/proximite/",{
params:{
macro_zonning_noeud_id_2:macro_zonning_noeud_id_2,
macro_zonning_noeud_id_1:this.noeud.id
}
}).then((res) => {
Vue.delete(this.weightSorted, String(macro_zonning_noeud_id_2));
})
},
update_line(nb_points){
this.points_restants = this.points_restants - nb_points;
this.points = this.points + nb_points;
},
addNoeudProximite(){
axios.put('/macrozonning/proximite/', {
'macro_zonning_noeud_id_1': this.noeud.id,
'macro_zonning_noeud_id_2': this.new_noeud,
'weight': this.new_weight
}).then((res) => {
Vue.set(this.weightSorted, String(this.new_noeud), res.data);
});
}
}
}
</script>
When the function delete_final is executed on the last item of my list, the view is correctly rerendered as the last item of my list is removed. But when I try to remove the first item of my list then the view rerenders but the the last item has been removed. When I check the Vue object in devtools, it does not reflect the new view, but it reflects the action taken (my first item has been removed).
If you have any idea where this problem comes from it would be awesome.
Thanks a lot community
Use a key attribute on the element you are rendering with v-for so that vue can exactly identify VNodes when diffing the new list of nodes against the old list. See key attribute
<tr> v-for="noeud_poids in weightSorted" :key="noeud_poids.id" </tr>

How can I filter some content added dynamically with jQuery?

First of all, sorry for my english, I'm still learning :).
My problem is the next, I have added some HTML content dinamically with jQuery, specifically these inputs:
<td id="date"><input type="text" id="input_1" class="select" /></td>
<td id="date"><input type="text" id="input_2" class="select" /></td>
<td id="date"><input type="text" id="input_3" class="select" /></td>
<td id="date"><input type="text" id="input_4" class="select" /></td>
<td id="date"><input type="text" id="input_X" class="select" /></td>
The number of inputs depends how many register I have in my DB.
For the another hand, I have this code in jQuery that I used with the same content but it wasn't added dynamically. I tried to execute this script after add the content above:
$('input')
.filter(function() {
return this.id.match(/input_./);
})
.foo({
....
});
When I try to apply the same script with the dynamically content it doesn't work, it doesn't match anything.
I read about delegate() and live() method but I didn't understand how can use them in my situation because all the examples I saw it was for handlers events.
Anybody knows how can I solve this problem.
Thanks in advance.
$(document).on('change', 'input[id^=input_]', function() {
/* Do stuff */
});
So you could do something like this demo
// Wrap inside a document ready
// Read .on() docs (To ensure the elements...bla bla)
$(document).ready( function () {
input_index = 0;
setInterval(addInput, 1000);
$(document).on('change', 'input[id^=input_]', function() {
$(this).val($(this).attr('id'));
});
function addInput () {
$('<input type="text" id="input_'+input_index+'"/>')
.appendTo('#empty')
.change(); // <============================ Pay attention to this
input_index++;
}
});