Chapters

48 Chapters | 5:05:52 |

01

Encore, Symfony & API Platform

7:15
02

Installing Vue, Webpack & Eslint

8:57
03

Vue Instance & Dynamic Data

6:10
04

Single File Component

4:17
05

CSS: Styling a Component

4:51
06

data() and Vue Dev Tools

4:28
07

Creating a Child Component

5:09
08

Props: Passing Info into a Child Component

4:49
09

v-bind: Dynamic Attributes

6:39
10

Modular CSS

7:06
11

Webpack dev-server: Faster Updating

6:20
12

HMR: See Changes without Reloading

4:36
13

Organizing into more Components

6:08
14

Aliases

5:05
15

Looping with v-for

7:39
16

v-on & methods: User Interaction

8:33
17

Magic "this" & its Properties

7:29
18

Reactivity

7:55
19

v-if, v-show and Conditional Classes

5:12
20

Computed Properties

5:58
21

Where should a Piece of Data Live?

7:06
22

Communication UP with $emit

5:49
23

Using Shared CSS

5:08
24

Ajax with Axios

5:41
25

The await Keyword

7:34
26

Product Listing Components

8:13
27

Product Details & Smart vs Dumb Components

8:51
28

Loading Component

5:35
29

Dynamic Categories via Ajax

5:30
30

Passing data From the Server to Vue

6:46
31

Reading Server Data & :global Classes

7:18
32

Page Context "Service"

8:12
33

Filtering the Products

4:51
34

Smarter Loading: Ajax status as State

8:00
35

Ajax Services

7:54
36

Skipping Ajax: Sending JSON Straight to Vue

6:37
37

Faking Ajax calls: Reading Synchronously

6:06
38

Passing Props vs Fetching Directly

6:36
39

Hoisting Data Up

6:52
40

The Formidable v-model

7:04
41

Pass Data in a Custom Event & Internal Data

6:41
42

Filtering Products

3:47
43

Async Computed Properties

9:00
44

Debouncing: Data can Hold Anything

4:18
45

Business Logic Helpers

5:57
46

Adding an [x] to our Search Bar

4:19
47

Watchers: The Good, The Bad & The Useful!

6:18
48

Adding a Watcher

5:13

> JavaScript Frameworks & Tools > The Delightful World of Vue

Buy Access to Course

33.

Filtering the Products

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Challenge

Next Chapter

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

10 Comments

Sort By

Login or Register to join the conversation

davidmintz 3 years ago edited

I hate to be a whiner, but I am stuck with a weird problem I can't figure out. My products are not being filtered. I keep getting 12 items of different categories.

For example: When I hit the url https://127.0.0.1:8000/api/products?currentCategoryId=/api/categories/2 using the Platform API interface or curl, the data comes back as it should: five items of office furniture (the id of the Office Furniture category in my world being 2 rather than 24). When I click Furniture in the sidebar category, however, I get the 12 unfiltered items.

Doing my Troubleshooting 101, I ask, OK, is currentCategoryId set correctly by Javascript when the page is rendered, or is it null? It is correct. Are the right params being passed in the axios call? Yes. What is the URL we are hitting with this axios call? It is indeed https://127.0.0.1:8000/api/products?currentCategoryId=/api/categories/2 according to the Firefox console. And what data is in the response? The 12 unfiltered items. And that is what is being assigned to this.products in my created() method.

Any ideas?

async created() {
        console.log('"created" is running');
        const params = {};
        if (this.currentCategoryId) {
            params.currentCategoryId = this.currentCategoryId;
        }
        const response = await axios.get('/api/products', { params });
        console.log(`our category id is ${this.currentCategoryId}`); // output: our category id is /api/categories/2
        console.log(params); // output: Object { currentCategoryId: "/api/categories/2" }
        this.products = response.data['hydra:member'];
        console.log(response.data['hydra:member']); // 12 items
    },

    ```

|

weaverryan SFCASTS davidmintz 3 years ago

Hey David!

A mystery! Ok, so we know that going to https://127.0.0.1:8000/api/products?currentCategoryId=/api/categories/2 via the (1) API Platform interface works correctly but (2) going to this URL via axios is NOT working correctly. That IS, indeed, super strange. What could be different?

The only thing that immediately came to mind is that the API Platform interface is setting an Accept header on the request - iirc it's application/ld+json. However, I don't think that would make a difference in how the items are filtered... and I think API Platform (via axios) IS returning json ld anyways. So, I don't think this is it.

But something must be different. So here's what I would do:

A) You are already able to get a "curl" command version that DOES do the filtering correctly. Awesome!
B) After making the Ajax request via Axios (where the filtering is incorrect), in your network tools, you should be able to right click on that request and select "copy as curl".

Cool! So now you have 2 similar (but not identical) curl commands: one that works correctly and one that doesn't. Try tweaking each of these until you find what subtle difference is causing the bad behavior. I'd love to know what you find out.

Cheers!

|

davidmintz weaverryan 3 years ago edited

OMFG. You won't -- no I think maybe you will! -- believe this. I was saying
params.currentCategoryId = this.currentCategoryId
and the attentive reader will see there's a wee little mistake there. The name of the parameter should be category. This is what I get for typing like a good person rather than copy-pasting (-: D'oh. So embarrassing, maybe we should delete this little thread.

Thanks for putting me on track to figuring it out!

|

Thibaut 3 years ago

Hello!

I love this course, great job as always.

I was just wondering if it was considered "best practice" to keep using props to pass an information we're collecting with a service.
The reason why I'm asking is because I was doing this part of the course on my own (for the challenge - and being really psyched about Vue! :p) and I stumbled upon that reflection: should I keep passing this piece of basic information (routing) through props from component to component or should I just call the service directly from the component I'm currently using that information?
My answer was to import the getCurrentCategoryId() method from the page-context service but I'm very interested in knowing your take on this.

|

MolloKhan SFCASTS Thibaut 3 years ago

Hey Thibaut,

That's a good question, and the answer is (as always) that it depends on your app. If the service method you need to call tends to change or has arguments that are not too easy to get, then it's better just to inject the value as a prop in your component. So, you need to evaluate what option will make your code more resilient to change

Cheers!

|

sasa1007 5 years ago

Hi!!

I am interested how should look axios get (what is sintax) if we use

https://api-platform.com/do...

How I can get all objects from db on curent date, or how I can get objects beetwen two dates

In my api platform everything is work, but I dont know how to send date (dates) via axios so I can filter result by date or range date.

|

MolloKhan SFCASTS sasa1007 5 years ago edited

Hey sasa1007

Have you tried sending your dates as a string? Then in your backend you can read the string and transform it back into a DateTime object

Cheers!

|

sasa1007 MolloKhan 5 years ago

Thank you for your answer.

Uh, I'll try to explain.

I can get string from date object in my vue component and I can try to use it in axios, but I need to send somehow date (string) as parameter so I can get collections of object.

In my api documatacion when I put in entity this line of code

@ApiFilter(DateFilter::class, properties={"created"})

I get this

https://prnt.sc/uagsbt

When i put 02-09-2020 in field created[strictly_after]

my curl is look like this

curl -X GET "http://localhost:8000/api/presences?created%5Bstrictly_after%5D=02-09-2020&page=1"

so my axios call will bi something like this

axios.get('http://localhost:8000/api/presences'.+'?created[strictly_after]'=02-09-2020' ) which I dont like it and I thing that this sintax 'created[strictly_after]' is not going to work, and I hope so that there is a better way to assign a value to the parameters from screenshot via axios.

Best regards

|

sasa1007 sasa1007 5 years ago

I find some solution

axios.get(this.URL+'?created[after]=2020-05-15')

|

shadowc sasa1007 5 years ago

Hi Sasa, I think you are on the right path. Though I'm not an expert on axios, it seems you have to send that URL in order to get that filter!

|

This course is also built to work with Vue 3!

Vue 2

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.30.0", // 0.30.2
        "axios": "^0.19.2", // 0.19.2
        "bootstrap": "^4.4.1", // 4.5.0
        "core-js": "^3.0.0", // 3.6.5
        "eslint": "^6.7.2", // 6.8.0
        "eslint-config-airbnb-base": "^14.0.0", // 14.1.0
        "eslint-plugin-import": "^2.19.1", // 2.20.2
        "eslint-plugin-vue": "^6.0.1", // 6.2.2
        "regenerator-runtime": "^0.13.2", // 0.13.5
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^8.0.0", // 8.0.2
        "vue": "^2.6.11", // 2.6.11
        "vue-loader": "^15.9.1", // 15.9.2
        "vue-template-compiler": "^2.6.11", // 2.6.11
        "webpack-notifier": "^1.6.0" // 1.8.0
    }
}

Previous Challenge

Next Chapter