Hey guys, great tutorial!!

I have noticed that L9-Start , which should have the finished code of L8, on main.js line 30 it doesn't have the right value on the computed property inStock(). It is set to look for the property image
instead of quantity

This might be confusing and frustrating for some users that need to compare their code with finished code and also, doesn't allow starting the lesson with fully working code.

https://github.com/Code-Pop/Intro-to-Vue-3/tree/L9-start

Current code:

        inStock() {
            return this.variants[this.selectedVariant].image
        }

Correct code:

        inStock() {
            return this.variants[this.selectedVariant].quantity
        }

Is there any way to contribute to the repo?

thanks

I think a new computed property should be used to disable/enable the "Remove Item" button.
Instead of checking inStock property, a new inCart property should be used.
The "Remove Item" button should be enabled only if the product id exists in cart - not if it exists in stock!

This is the solution proposed by L10-end:

    <button 
    class="button" 
    :class="{ disabledButton: !inStock }" 
    :disabled="!inStock" 
    @click="removeFromCart">
    Remove Item
  </button>
  <!-- solution -->

This is what I would suggest:

    <button 
    class="button" 
    :class="{ disabledButton: !inCart }" 
    :disabled="!inCart" 
    @click="removeFromCart">
    Remove Item
  </button>
  <!-- solution -->

When viewing the course files in the latest version of Chrome (Mac), Vue.js is not detected by the Vue.js DevTools extension.

Steps to reproduce

This assumes you're using VS Code with the Live Server extension installed, though the results may be the same in other editors with a live server view.

1. Download/clone.
2. Open index.html in VS Code.
3. Open with Live Server (use the command palette or right-click in the file and select the option).
4. Note that the extension icon does not light up to indicate that Vue.js is detected. When you click it, it should say "Vue.js not detected."
5. Open DevTools and note that the Vue menu item is not present.

This is resolved, as described here, by both installing the beta version of the extension and replacing the library reference. Updating the course files would of course do the trick as well. (If I get time I'll submit a pull request.)

My subscription was canceled! But I didn't do that! Could you help me to reactivate the subscription!

Please help:
Iam not sure i make anything wrong, but this command

"gh repo clone Code-Pop/Intro-to-Vue-3/L5-end"

is not working, and this command

" gh repo clone Code-Pop/L5-end"

also not.
What i make wrong. Whitch command i have to use?
Or is it a error from the Repo?

At line 41 in "main.js", the inStock is not access because both of the code is accessing the image key.

It it Javascript best practice to use 2 spaces for indents as enforced by most linters (eg. ESlint, StandardJS, Prettifier). Since this is a beginner tutorial, it's helpful to start us off with good habits.

During lesson 4 an inventory property is added and used on the html to show if the product has stock.
The challenge asks to add an onSale boolean property to show an "On Sale!" message.
On L4-end branch, both properties are inside the data element but they're not being used inside the html.

The L8 code starts with a property inStock: true and finishes with a computed value that returns an integer type.

What it could be done is the code below:

...
inStock() {
    return this.variants[this.selectedVariant].quantity > 0
},
...

css border-radius missing

https://github.com/Code-Pop/Intro-to-Vue-3/blob/vue2_version/assets/styles.css#L24

.color-box {
   width: 40px;
   height: 40px;
   margin-top: 5px;
+ border-radius: 50%;
}

The tutorial only provides a link to a template literal syntax highlighting plugin for VS Code users. However, Sublime Text users can also implement a VueJS compatible package to get this feature.

They need to install this package: https://packagecontrol.io/packages/JSCustom

And use the following configuration to ensure it works with VueJS requirement to announce the template literal via a
/* html */ ` "selector":

{
    "configurations": {
        "Vue Backticks": {
            "custom_templates": {
                "comments": {
                    "html" : "scope:text.html.basic"
                },
            },
        },
    },
}

See more context here: sublimehq/Packages#179 (comment)

Hi,

In the index file I have:

...
    <noscript>
      <strong>We're sorry but section-2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

I have searched everywhere - is there any set up I might have missed?

It's not a real issue, more of a question actually.

On this lesson the onSale property is used combined with the computed property sale. But when you change the onSale value, the p tag stays on the page and shows empty space. Is there a specific reason for it to do use it this way?

The way I see it, you could also use the following;

<p v-if="onSale">
<p v-shown="onSale">

And remove the check from the computed property.

https://github.com/Code-Pop/Intro-to-Vue-3/blob/L8-start/main.js#L11-L12

Hello experts,
there is a bug that addtocart button can not count the cart number. Does any one konw how to fix it

Ideas of things to include:

• Prerequisites
• How to get setup
• Questions? Submit an issue