We Keep Coding

How can I convert integers to corresponding strings in Vue markup?

I have a table for fetching data from the database. I used the "status" field for managing this table.
if the status is = 1, it means "Active" else if the status is = 2, it means "Completed" else if the status is = 0, t means "Deleted".
Then I need to show the above status word in the web page table.
I used the below to show the status number.
<tr v-for="(depAcc, index) in depAccs" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ depAcc.created_at }}</td>
<td>{{ depAcc.name }}</td>
<td>{{ depAcc.status }}</td>
Please instruct me to show the status word on the table.

I would create a data property containing the status map, like this:
data() {
return {
statusNames: {
0: 'Deleted',
1: 'Active',
2: 'Completed'
}
}
}
Then you can reference that in your markup:
<td>{{ statusNames[depAcc.status] }}</td>

In Vue, anything inside double braces {{ //this }} is evaluated as JS. You can therefore write a method to return strings based on your status, then put a function into your double braces.
<tr v-for="(depAcc, index) in depAccs" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ depAcc.created_at }}</td>
<td>{{ depAcc.name }}</td>
<td>{{ statusText(depAcc.status) }}</td>
</tr>
Then in your page script, add this method
var app = new Vue({
el: '#app',
methods:{
statusText(status){
let message = "Unknown Status"
if (status == 0) message = "Deleted"
if (status == 1) message = "Active"
if (status == 2) message = "Completed"
return message
}
}
});

I cant seem to pass value from controller to view, Laravel 8

I can't seem to parse data that i got from db on controller to view, i have tried multiple solutions that i got from similiar question but none seem to work.
i simply want to show my employee list on my admin page.
Here's my login controller
The login function works just fine, its just doenst seem to parse the data i got from db to view
public function postLogin(Request $request){
$list = "";
$list = \DB::table('users')->where('role','1')->get();
if(Auth::attempt($request -> only('username','password'))){
if (Auth::user()->role == '0') {
return view('admin',['daftar' => $list]);
}else if (Auth::user()->role == '1') {
return redirect('/EPage');
}
}
return redirect('/');
}
Here's my admin blade view
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">name</th>
<th scope="col">email</th>
<th scope="col">phone</th>
</tr>
</thead>
<tbody>
<tr>
#foreach($list as $lists)
<th scope="row">1</th>
<td>{{ $lists->name }}</td>
<td>{{ $lists->email }}</td>
<td>{{ $lists->phone }}</td>
#endforeach
</tr>
</tbody>
Please help me understand my mistake, Thank you in advance.
i'm expecting the admin page with show user list with role equals to 1

After i tinker here and there, i finally found that i forgot to put an "s" on my user(s) table name. silly mistake but crucial hahaha
it seems previously the variable that i parse are actually empty.
Here are my final controller that worked
public function postLogin(Request $request){
if(Auth::attempt($request -> only('username','password'))){
if (Auth::user()->role == '0') {
$daftar = \DB::table('users')->where('role',1)->get();
return view('admin',['daftar' => $daftar]);
}else if (Auth::user()->role == '1') {
return redirect('/EPage');
}
}
return redirect('/');
}
and here's my blade view
<tbody>
#foreach($daftar as $lists)
<tr>
<th scope="row">1</th>
<td>{{ $lists->name }}</td>
<td>{{ $lists->email }}</td>
<td>{{ $lists->Phone }}</td>
</tr>
#endforeach
</tbody>
also thanks to waqar for correcting my previous mistakes

You can send list data with view using compact like:
public function postLogin(Request $request){
$list = "";
$list = \DB::table('users')->where('role','1')->get();
if(Auth::attempt($request -> only('username','password'))){
if (Auth::user()->role == '0') {
return view('admin',compact('list'));
}else if (Auth::user()->role == '1') {
return redirect('/EPage');
}
}
return redirect('/');
}
then you can use $list on your blade easily.

How to call Laravel Model function with parameter into Vuejs template?

I have a product table and stock table. In stock table data about product sale and purchase are stored. I need to show the stock of every product base on purchase and sale. So I need to call a model function with product Id in vuejs template to calculate the stock quantity of the product. How to do this, or is there any alternative way? please help me out.
My product controller function is-
public function stock() {
return Product::with(['category', 'stock'])->get();
}
My product model function is-
public function stock($id){
$purchase_quantity = Stock::where([['product_id', $id], ['stock_type', 'purchase']])->sum('quantity');
$sale_quantity = Stock::where([['product_id', $id], ['stock_type', 'sale']])->sum('quantity');
return $purchase_quantity - $sale_quantity;
}
My vuejs template code where in every v-for iteration I want to call the model function-
<tr v-for="product in products.data" :key="product.id">
<td>{{ product.id }}</td>
<td>{{ product.category.name }}</td>
<td>{{ product.name }}</td>
<td>{{ product.unit }}</td>
<td>{{ product.stock(product.id) }}</td>
</tr>
Here product.stock(product.id) is not working.
It shows the error-
Too few arguments to function App\Models\Product::stock(), 0 passed

you need to use accessor in this case so
in Product.php
protected $appends = ['stocks'];
/**
* Get the Product's stock
*
* #return int
*/
public function getStocksAttribute()
{
$purchase_quantity = Stock::where([['product_id', $this->id], ['stock_type', 'purchase']])->sum('quantity');
$sale_quantity = Stock::where([['product_id', $this->id], ['stock_type', 'sale']])->sum('quantity');
return $purchase_quantity - $sale_quantity;
}
then in side javascript you can you can get stock in each product row like product.stocks
your vuejs code will be like this
<tr v-for="product in products.data" :key="product.id">
<td>{{ product.id }}</td>
<td>{{ product.category.name }}</td>
<td>{{ product.name }}</td>
<td>{{ product.unit }}</td>
<td>{{ product.stocks }}</td>
</tr>
ref link https://laravel.com/docs/8.x/eloquent-mutators#defining-an-accessor

jquery getting data from data-href

I am trying to make a table row a link by using jQuery and this:
jQuery(document).ready(function() {
$(".clickable-row").click(function() {
window.location.href = $(this).data('href');
});
});
In my html file i have this:
<tr class='clickable-row' data-href='my-page.com/user/123'>
<td><span class="glyphicon glyphicon-user"></span></td>
<td>{{ member.getFornamn }} {{ member.getEfternamn }}</td>
<td>{{ member.getEmail }}</td>
<td>{{ member.getTel1 }}</td>
<td>{{ member.getPostadress }}</td>
<td>{{ member.getPostnr }}</td>
</tr>
Nothing is happening.
If i change to this: window.location.href = 'www.google.com'; it's working so I know WERE the problem is...
What am I missing?
Edit:
Plunker: http://plnkr.co/edit/0MBucaxR1fDpYZjZRLHc?p=preview
For some reason above doesn't work for me. If I use this it works:
jQuery(document).ready(function() {
$(".clickable-row").click(function() {
window.location.href = '**any link at all**';
});
});
But when i change to this my console log don't even recognize my click...??
jQuery(document).ready(function() {
$(".clickable-row").click(function() {
window.location.href = $(this).data('href');
});
});

I did this:
jQuery(document).ready(function() {
$(".clickable-row").click(function() {
thisdata = $(this).attr('data-href');
console.log(thisdata);
window.location.href = thisdata;
});
});
And the console gave me the correct answer.
I noticed that my actual table looked like this:
<tr class='clickable-row' data-href='URL://my-page.com/user/123'>
So by removing the URL:// it works now.
Thand you for your help!

ng-repeat takes too much time to render data

I know there are many questions already posted for the same issue but none of the solutions work in my case.
On calling a web service I get JSON response. In this JSON, there are around 2000+ objects from which I need to display data on the table. I want to display all (2000+) records in the table and Yes, I cannot limit or paginate, need to display it on a single page (I know it's stupid but it's the business requirement). I don't need sorting or searching.
Data transfer is about 2MB and the request completes in about 2-4 secs approx. but it takes around 10-15 secs to data render on the page.
Now, what I am looking for is either speed ng-repeat binding things up (if possible) or display the data as soon as I receive it and keep on adding it until all rows are displayed.
Check out the code below :
HTML
<table class="table table-bordered table-striped cf">
<thead style="color: #333;">
<tr>
<td>Asset Name</td>
<td>Date/ Time</td>
<td>Location</td>
<td>Ignition</td>
<td>Speed</td>
<td>Heading</td>
<td>Direction</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="cols in tableData">
<td>{{ cols.aN }}</td>
<td>{{ cols.dT }}</td>
<td>{{ cols.Lat }}, {{ cols.Lon }}</td>
<td>{{ cols.I }}</td>
<td>{{ cols.S }}</td>
<td>{{ cols.H }}</td>
<td>{{ cols.D }}</td>
</tr>
</tbody>
</table>
JS
var ignition_text = '';
var lat = '';
var lon = '';
for (var i = 0; i < data.length; i++) {
if (data[i].ignition = 1) {
ignition_text = "On";
} else {
ignition_text = "Off";
}
$scope.$apply(function() {
$scope.tableData.push({
aN: name,
dT: data[i].eventUTCTime,
Lat: data[i].latitudeDegrees,
Lon: data[i].longitudeDegrees,
I: ignition_text,
S: data[i].speedMPH,
H: data[i].longitudeDegrees,
D: data[i].latitudeDegrees
});
});
}
Thanks in advance!

You probably wont need $scope.$apply at all. And even if you need it, you should only use it once you pushed all data to the table. Otherwise, every added entry will force an digest-cycle. Just build your array and assign the finished array to the scope-variable. Then angular will only build the table once.
Depending on the nature of your variable name you may be able to eliminate the array building as well and just use the data you are downloading. Apart from nameyou just use that data anyway.

Here is a plunk that has a similar data size but loads much faster http://plnkr.co/edit/I4rN1ZMaR3e1mbcsJ9Ka. If you were to make a quick plunk I could use your data and edit your code but from the looks you just need the main assignment to the scope without the apply for the data and add a track by to the ng-repeat. SN: You would want to manipulate your data inside the for loop then do the assignment to the scope.
for (var i = 0; i < data.length; i++) {
if (data[i].ignition = 1) {
ignition_text = "On";
} else {
ignition_text = "Off";
}
}
$scope.tableData=data;
JS
$http.get("largeData.json").then(function(response) {
vm.test = response.data;
});
HTML
<tbody>
<tr ng-repeat="(key, value) in main.test track by $index ">
<td>{{ value.ask }}</td>
<td>{{ value.bid }}</td>
<td>{{ value.volume_btc }}, {{ value.volume_percent }}</td>
<td>{{ value.last }}</td>
<td>{{ value.timestamp }}</td>
</tr>
</tbody>