code-pop / intro-to-vue-3 Goto Github PK
View Code? Open in Web Editor NEWCode for Vue Mastery's Intro to Vue 3 course:
Home Page: https://www.vuemastery.com/
Code for Vue Mastery's Intro to Vue 3 course:
Home Page: https://www.vuemastery.com/
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.
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 -->
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:
My subscription was canceled! But I didn't do that! Could you help me to reactivate the subscription!
updateVariant(index) {
this.selectedVariant = index
}
updateVariant(index) {
this.selectedVariant = index
**this.onSale = this.variants[index].quantity**
}
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)
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.
When viewing the course files in the latest version of Chrome (Mac), Vue.js is not detected by the Vue.js DevTools extension.
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.
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.)
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%;
}
At line 41 in "main.js", the inStock is not access because both of the code is accessing the image key.
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?
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
},
...
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.