How to Check All table Vue.js - javascript

i want create web crud with vue+axios. but i don't understand how create checbox check all use vue use data api, which later for delete all,
I use this method but the data doesn't appear
sorry i just learned vue + axios
https://pastebin.com/iJDPU0AB
<table id="" class="table table-bordered table-striped">
<thead>
<tr>
<th><input type="checkbox" v-model="selectAll"></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody id="target_listing">
<tr v-for="tl in target_listing">
<td><input type="checkbox" v-model="selected" :value="user.id" number></td>
<td>{{ tl.id_target_mst_status }}</td>
<td>{{ tl.category }}</td>
<td>{{ tl.first_name }}</td>
<td>{{ tl.last_name }}</td>
<td>{{ tl.revisit }}</td>
<td>{{ tl.visit_status }}</td>
</tr>
</tbody>
</table>
my app.js
var myTable = new Vue({
el: '#target_listing',
data(){
return{
target_listing:null
}
selected: []
},
mounted(){
axios
.get('http://localhost/warna2/public/api/target_listing')
.then(response => (this.target_listing = response.data.data))
.catch(error => {
console.log(error)
this.errored = true
})
},
computed: {
selectAll: {
get: function () {
return this.target_listing ? this.selected.length == this.target_listing.length : false;
},
set: function (value) {
var selected = [];
if (value) {
this.target_listing.forEach(function (user) {
selected.push(user.id);
});
}
this.selected = selected;
}
}
}
})

Related

TypeError: Cannot read properties of null (reading 'subTree')

What does this error mean?
error message
this happens when I put my filteredData variable inside the tr tag of the table.
<table id="table">
<tr>
<th>First name</th>
<th>Last Name</th>
<th>Email</th>
<th>Original email</th>
<th>Actions</th>
</tr>
<template>
<tr v-if="(fiteredData = '')">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr
v-else
v-for="data in filteredData"
:key="data.ind_id"
:value="data.ind_id"
>
<td>{{ data.first_name }}</td>
<td>{{ data.last_name }}</td>
<td>{{ data.email }}</td>
<td>{{ data.email }}</td>
<td>
<button #click="sendProps(data)">
<i class="fa-regular fa-edit" aria-hidden="true"></i>
</button>
</td>
</tr>
</template>
</table>
This is my method:
data() {
return {
fetchedData: "",
filteredData: "",
};
},
methods: {
searchResult(e) {
this.filteredData = this.fetchedData.filter((data) => {
return data.email.toLowerCase().includes(this.email.toLowerCase());
});
e.preventDefault();
console.log(this.filteredData);
}
fetchedData get the data from this:
async mounted() {
await axios.get("http://localhost:5000/individuals").then((result) => {
this.fetchedData = result.data;
console.log(this.fetchedData);
});
},
I am guessing this: <tr v-if="(filteredData = '')"> should be: <tr v-if="filteredData === ''">, or even beter: v-if="!filteredData.length". You've misspelled the variable name and are accidentally setting it to an empty string rather than doing a comparison (we've all been there, I'm sure)
On a related note, I would initialize fetchedData and filteredData as empty arrays, not strings, because v-for is meant to iterate over objects and arrays, not strings (even though it's probably smart enough to handle it).
When I encountered this problem in the past it was that the browser itself had an issue and opening my application in a new private window worked.

How to populate list in list in a table Angular

I have a list of values [1, paracetamol,[{1, location, quantity}, {2, location2, quantity}]
so I have to print in two rows
1. [1, paracetamol, location, quantity]
2. [2. paracetamol, location1, quantity2]
I have maintained head
headElements = ['Drug ID', 'Drug Name', 'Location', 'Quantity']
<table class="table table-striped" >
<thead>
<tr>
<th *ngFor="let head of headElements" scope="col">{{ head }}</th>
</tr>
</thead>
<tbody>
<div *ngFor = "let drugDetail of drugList">
<tr *ngFor="let loc of drugDetail.drugLocationList">
<th scope="row">{{ drugDetail.drugId }}</th>
<td>{{ drugDetail.drugName }}</td>
<td>{{loc.location}}</td>
<td>{{ loc.quantity}}</td>
</tr>
</div>
</table>
output:
['Drug ID', 'Drug Name', 'Location', 'Quantity']
[1, paracetamol, location, quantity]
[2. paracetamol, location1, quantity2]
Maybe it could be easier if you do first a map to your array data, something like this:
copyDrugList = drugList.map(drugDetail => [
{ drugId : drugDetail.drugLocationList[0].drugId ,
drugName : drugDetail.drugName ,
location : drugDetail.drugLocationList[0].location ,
quantity : drugDetail.drugLocationList[0].quantity ,
},
{ drugId : drugDetail.drugLocationList[0].drugId ,
drugName : drugDetail.drugName ,
location : drugDetail.drugLocationList[1].location ,
quantity : drugDetail.drugLocationList[1].quantity ,
},
]);
Then, you only need to do a classic Angular HTML ngFor:
<tr *ngFor = "let drugDetail of copyDrugList ">
<td>{{ drugDetail.drugId }}</td>
<td>{{ drugDetail.drugName }}</td>
<td>{{ drugDetail.location }}</td>
<td>{{ drugDetail.quantity }}</td>
</tr>

Vue.js data table only showing data in first column

I am trying to iterate through an object, pulled from database using axios. I am able to make the object show up in my data table, but i am unable to make it break the data to the specified columns
first snippet is the parent component. the tr and td for the actual list i broke out to a separate component but that may need to be fixed.
<template>
<div class="container">
<router-link to="/add" class="btn btn-primary btn-sm float-
right">AddClient</router-link>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th></th>
</tr>
</thead>
<client-info></client-info>
</table>
</div>
</template>
<script>
import ClientInfo from '#/components/clientslistexperience/ClientInfo'
export default {
name: 'ClientsList',
components: {
ClientInfo
},
methods: {
},
}
</script>
enter code here
next is the component iterating through the data to be show in the table
<template>
<div class="client-info">
<tbody>
<tr v-for="(client, index) in clients" v-bind:key="index"
:client="client">
<th scope="row">{{ client.id }}</th>
<td>{{ client.name }}</td>
<td>{{ client.type }}</td>
<td>{{ client.email }}</td>
<td>{{ client.phone }}</td>
</tr>
</tbody>
</div>
import { mapState } from 'vuex'
export default {
name: 'client-info',
props: {
id: Array,
type: String,
name: String,
email: String,
phone: Number,
},
computed: {
...mapState ([
'clients'
])
},
created() {
this.$store.dispatch('retrieveClients')
}
}
</script>
enter code here
last is the vuex store where axios request is being made. now i know using the vuex for smaller projects is over kill but im intending for this to become rather large so this is the method ive chosen. any help would be awesome! Thanks.
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
axios.defaults.baseURL = 'http://client-api.test/api'
export default new Vuex.Store({
state: {
clients: []
},
mutations: {
retrieveClients(state, clients) {
state.clients = clients
},
},
actions: {
retrieveClients(context) {
axios.get('/clients')
.then(response => {
// console.log(response)
context.commit('retrieveClients', response.data)
})
.catch(error => {
console.log(error)
})
}
}
})
enter image description here
In fact, you need to remove the div root element in your ClientInfo.vue component.
Replace the div by tbody and it solve your problem ;)
<template>
<tbody class="client-info">
<tr v-for="(client, index) in clients"
:key="index">
<td>{{ client.id }}</td>
<td>{{ client.name }}</td>
<td>{{ client.type }}</td>
<td>{{ client.email }}</td>
<td>{{ client.phone }}</td>
</tr>
</tbody>
</template>
Full demo here > https://codesandbox.io/s/v8vw0z89r7

How to remove old data and bind new data to a table while using ng-repeat?

I have a custom directive like this:
<table id="usertbl" class="table table-hover table-bordered" style="
position: relative;
top: 27px;
">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>gender</th>
<th>state</th>
<th>zip</th>
<th>email</th>
<th>mobile</th>
<th>Delete</th>
</tr>
<tr ng-repeat="x in users">
<td>{{ x.fName }}</td>
<td>{{ x.lName }}</td>
<td>{{ x.gender }}</td>
<td>{{ x.state }}</td>
<td>{{ x.zip }}</td>
<td>{{ x.email }}</td>
<td>{{ x.mobile }}</td>
<td><button class="btn btn-danger" ng-click="clickFunc(x.email)">Delete Customer</button></td>
</tr>
</table>
</body>
http.get("getallusers.do",{ params:{pageno:count,pageSize:2}}).then(function(response) {
//First function handles success
scope.users = response.data;)}
One next button is there each time clicking it will fetch 10 records from the db, but each time the 10 record is added to the existing 10 record in the ui table. i want only new 10 record to be added in the table .
Clear the array and then push the new data as below
scope.users =[];
scope.users = response.data;
You need to call $scope.$apply() after $scope.users = response.data;
$scope.users = response.data;
$scope.$apply()
Working demo
You have to methods to do this
First, you can clear the array and then push the new data
scope.users = [];
scope.users = response.data;
Second, you can splice and insert new data
//This will recreate the array as well
scope.users.splice(0, scope.users.length, ...response.data);
So it will be like this
http.get("getallusers.do",{ params:{pageno:count,pageSize:2}}).then(function(response) {
//First function handles success
scope.users = []
scope.users = response.data;
//OR
scope.users.splice(0, scope.users.length, ...response.data);
)}
UDPATE
What I am assuming from your comments is you are trying to remove values which are same in response.data and users.
You could do something like this.
scope.users = scope.users.filter(function(obj) {
return response.data.indexOf(obj) == -1; });

Vue.js 2 components parent child item not defined

I am new to vue and I am getting the error referenceError: items is not defined. Can anyone see why this happens or give me some pointers?
I think it has something to do with the items not being set on first look at the template.
My code:
<div id="root">
<task-list></task-list>
<template id="my-parent">
<table>
<thead>
<tr>
<th>Name</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr is="task" v-for="item in items" :item="item"></tr>
</tbody>
</table>
</template>
<template id="my-child">
<tr>
<td></td>
<td>{{ item.name }}</td>
<td>{{ item.id }}</td>
</tr>
</template>
</div>
<script>
Vue.component('task-list', {
template: '#my-parent',
data: function() {
return {
items: []
}
},
methods: {
getMyData: function(val) {
var _this = this;
$.ajax({
url: 'vuejson.php',
method: 'GET',
success: function (data) {
console.log(data);
_this.items = data;
},
error: function (error) {
alert(JSON.stringify(error));
}
})
}
},
mounted: function () {
this.getMyData("0");
}
});
Vue.component('task', {
template: '#my-child',
props: ['item'],
data: function() {
return {
item: {}
}
}
});
new Vue({
el: "#root",
});
</script>
Here is working modified code:
<template id="my-child">
<tr>
<td>{{ item.name }}</td>
<td>{{ item.id }}</td>
</tr>
</template>
<template id="my-parent">
<table>
<thead>
<tr>
<th>Name</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr is="task" v-for="item in items" :item="item"></tr>
</tbody>
</table>
</template>
<div id="root">
<task-list></task-list>
</div>
And js:
Vue.component('task-list', {
template: '#my-parent',
data: function() {
return {
items: []
}
},
methods: {
getMyData: function(val) {
var _this = this;
_this.items = [{name: '1.name', id: 1}];
}
},
mounted: function () {
this.getMyData("0");
}
});
Vue.component('task', {
template: '#my-child',
props: ['item'],
data: function() {
return {
}
}
});
new Vue({
el: "#root",
});
jsfiddle
It would be much easier to you to work with vue, if you do some tutorials first:)
edit:
And one more thing: if you declare property(item in your case), dont use that name in data.
So, what I did:
- placed templates outside of your root element
- removed "item" from data
You should describe templates outside div#root.
Example
<div id="root">
<task-list></task-list>
</div>
<template id="my-parent">
<table>
<thead>
<tr>
<th>Name</th>
<th>id</th>
</tr>
</thead>
<tbody>
<tr is="task" v-for="item in items" :item="item"></tr>
</tbody>
</table>
</template>
<template id="my-child">
<tr>
<td></td>
<td>{{ item.name }}</td>
<td>{{ item.id }}</td>
</tr>
</template>
Because if they are in #root they are part of vue instance for it, and there is no items in it.
new Vue({
el: "#root",
//no items
});

Categories