How do I get access to this array, inside it has objects, I used laravel, inertiajs, vuejs, Im passing the variable from laravel controller to vuejs component with inertia.js
public function index($slug,Category $categories)
{
$category = $categories->where('slug',$slug)->with('product')->get();
return Inertia::render('Category',[
'categories' => $category
]);
}
If I understand your point correctly , I think you would like to access the products , then it's better to return from the controller to vue only the products.
and according to the variable naming I think you are expecting only one category to be returned then may be you need to check retrieving single model using ->first()
https://laravel.com/docs/8.x/eloquent#retrieving-single-models
You can loop with v-for or access directly:
categories[0].description
Related
I've been trying to figure out how to do this, but can't seem to get it to work. I have created a function that is being called when I click a component using v-on:click. I am also trying to pass in a value that I can then use to access a particular array that is coming in the form of data from a backend.
Here is the function in the component:
<v-card
#click="getContent('topSellers')"
>
I am then passing the 'topSellers' value as an "id" into the function that is being used to get access the exact array that I am looking for:
getContent(id) {
this.accordion = this.data.id;
console.log("data", id);
}
First of all, this.data.topSellers works. And I am seeing that the id value is correct in the console. Obviously, this is not working because id is currently a string, but I don't know how to fix that issue. Any help would be appreciated!
You need this.data[id] instead of this.data.id.
See property accessors on MDN for reference.
data[id] will access the property of data with the name of the value of id, in your case topSellers. So data.topSellers is equivalent to data["topSellers"]
[] allows you to access objects with variables.
It is recommended to handle exceptions because the variable received is not safe.
getContent(id) {
const accordion = this.data[id] || null;
if(accordion){
console.log("data", accordion);
this.accordion = accordion;
}
}
Im building my first Django app.
I want to call a javascript function that receives a list of strings.
In my current version Im sending a Django object (called provider) property like this and it´s working fine:
<i class="fi-download"></i>
But now I want to call a Provider model method that returns a list of strings, so then I can do something with this list in Js method
def get_provider_files_urls(self):
provider_files = self.provider_files.all()
file_list = []
for f in provider_files:
file_list.append(f.file.name)
return file_list
I tried this:
<i class="fi-download"></i>
and got this error:
Uncaught SyntaxError: missing ) after argument list
A quick and dirty way to generate a JS array from a list is to use the join filter
onclick="download_provider_files(['{{ provider.get_provider_files_urls|join:"', '" }}'])"
Probably cleaner to use the json_script filter though
in order to pass php variables from laravel to vue frontend I created a Javascript class, I use this class static put method to send an associative array to frontend.
<?php
namespace App\Helpers;
class Javascript
{
public static function put($array, $request)
{
//I call this static method to pass backend variables to Vue, from blade I json_encode the payload, assign it to a window variable
//and later add it to the Vue.prototype so I can access in vue components like this.$app.whatever.
//This helper method can be called more than one time in laravel's request->reponse cycle, from middleware, controller action, route redirect ...
//so instead of creating recreating $app array everytime I want to find a way to push passed key value pairs to a global javascript object
$app = array();
$app = array_merge($request->globals, $array);
view()->share('app', $app);
}
}
When I want to return a laravel blade view wth javascript data I do it like this:
$featuredPosts = Post::where('isFeatured', true)->where('isVisible',true)->with('postcategory')->get();
Javascript::put([
'meta' => $meta,
'featuredPosts' => $featuredPosts,
], $request);
return view('publicaciones.list', compact('meta'));
And in my blade master layout:
<script type="text/javascript">window.$app = {!! json_encode( $app ) !!};</script>
Another case is when I want to have global variables for all routes/views, for this purpose I have a global middleware called GlobalsVar where I do.
public function handle($request, Closure $next)
{
$globals['auth'] = Auth::user() ? User::with('appointment')->find(Auth::id()) : false;
$globals['previousUrl'] = URL::previous();
$request->globals = $globals;
return $next($request);
}
Currently inside my Javascript class I create an empy array and merge part of my requests with the passed array from my controllers, I also pass request object as seconda parameter, I want to improve this in two ways:
1) Each time I call Javascript::put static method the passed values are merged into the exisiting object, this is because if during the request -> response cycle I call Javascript::put the payload is recreated and previous data is lost, is there a way to preserve this data?
2) I don't want to pass Request $request object each time I run Javascript::put, is there a way to always inject the Request method
if your call vue from blade you can pass laravel data like props
#extends('index')
#section('contenido')
<div id="content-container">
<div id="page-head">
</div>
<div id="page-content">
<vue-file :variable="{{ $variable}}"></vue-file>
</div>
#endsection
and in the vue-file you can get it like this
props:{
variable:Array
}
I have a template that includes a component.
// pods/workgroup/template.hbs
...
{{workgroup/member-add
wgId=model.id
store=store
peekUser2Workgroup=peekUser2Workgroup
}}
...
Within that component I need to lookup if something is already present in the store.
//somewhere in components/workgroup/member-add/componsent.js
let alreadyInStore = this.store.peekRecord('user2workgroup',u2wId);
I made it work by injecting the store into the component (as above), which of course is bad practise.
So I tried making a property in my parent-controller that does the store lookup:
//in components/workgroup/member-add/componsent.js
let alreadyInStore = this.get('controller').peekUser2Workgroup(u2wId);
//in pods/workgroup/controller.js
peekUser2Workgroup: function(u2wId) {
console.log(this);
console.log(this.store);
return this.store.peekRecord('user2workgroup',u2wId);
}
This works fine as long as I pass the complete store into the compentent as above.
However, if I don't pass the store to the component it get's undefined, although never accessed from the component directly (the store is present in the controller alone).
Logging into console of this gives me surprisingly the component, not the controller, this.store is undefined.
So I've learned, that with this I don't access the controller itself when a function/parameter gets called from outside/a component.
The question is, how can I make the controller to reference to itself with this?
Or how can I access the store when calling a parameter from outside?
Do I really need to pass the controller itself to himself??
like so:
// in component
let alreadyInStore = this.get('controller').peekUser2Workgroup(this.get('controller'), u2wgId);
//in controller
peekUser2Workgroup: function(myself, u2wId) {
console.log(this);
console.log(this.store);
return myself.store.peekRecord('user2workgroup',u2wId);
}
That seems very odd to me, and looks like I'm shifting around even more than I did initially when simply injecting the store to the controller...
Ember: 2.0.1
Ember-Data: 2.0.0
Instead of passing the store into the component as a property, inject it using Ember.service like this:
store: Ember.service.inject()
Then instead of passing in the function, just pass in the id vale you're looking up:
{{workgroup/member-add
wgId=model.id
}}
Now in your component you can fetch the record:
workgroup: function(){
return this.get('store').peekRecord('user2workgroup', this.get('wgId'));
}.property()
Probably an easy question, but I am making a call to an API that returns a full list of products in JSON. The products are listed under 4 categories in the JSON - 'connectivity','cables','routers' and 'servers'. Using the getProducts() function below, I assign the list of 'connectivity' products to a variable called $scope.connectivitylistOfProducts - and this is what I display to the user in the UI as a default.
productsServices.getProducts()
.then(function (allProducts) {
$scope.listOfProducts = allProducts.data.category[0];
$scope.connectivitylistOfProducts = allProducts.data.category[0].connectivity;
})
.finally(function () {
});
In the UI, I have a select box that's contains a list of the categories where the user can change to view the products under the category they choose. changeProduct() is what is called to change the category
$scope.changeProduct = function () {
// change the product
};
I am already loading the full list of categories and products into $scope.listOfProducts and I dont want to make another API call by calling getProducts again. I'm not sure how to set up another variable (for example $scope.routerslistOfProducts) and assing the correct products to it. Could anyone tell me the best way to handle this? Many thanks
Could you try to access lists by array notation:
you have:
$scope.listOfProducts = allProducts.data.category[0];
you could create a category variable:
$scope.category = 'connectivity';
and to access using, for example:
<div ng-repeat="product in listOfProducts[category]">
If your payload has all the arrays then on API call back assign to scope variable say $scope.mylist, now you bind $scope.mylist.categories to drop down and on drop down change send category Id to change function () and filter using for loop and equal operator , while running through loop I.e filtering , which ever product matches category push to a variable say $scope.filteredproducts ....and here you got your filtered products.
This is simple way to understand , there are better ways to maintain filtered arrays too.