https://github.com/chip/vue-select-quantity
This Vue 2 component was created for easily specifying a quantity, as is the case in a shopping cart.
https://github.com/chip/vue-select-quantity
cart component component-library javascript menu quantity quantity-picker select shopping shopping-cart shoppingcart vue vue2 vuejs vuejs2
Last synced: 7 months ago
JSON representation
This Vue 2 component was created for easily specifying a quantity, as is the case in a shopping cart.
- Host: GitHub
- URL: https://github.com/chip/vue-select-quantity
- Owner: chip
- License: mit
- Created: 2023-09-15T17:19:14.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-06T04:22:50.000Z (almost 2 years ago)
- Last Synced: 2025-02-09T06:49:01.201Z (8 months ago)
- Topics: cart, component, component-library, javascript, menu, quantity, quantity-picker, select, shopping, shopping-cart, shoppingcart, vue, vue2, vuejs, vuejs2
- Language: Vue
- Homepage:
- Size: 60.9 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VueSelectQuantity component
This Vue 2 component was created for easily specifying a quantity, as is the case in a shopping cart.
## How to install
### NPM
```bash
npm install @chipcastle.com/vue-select-quantity
```
### PNPM
```bash
pnpm install @chipcastle.com/vue-select-quantity
```
## Basic Usage
### src/App.vue
```html
import { VueSelectQuantity } from '@chipcastle.com/vue-select-quantity'
import '../node_modules/@chipcastle.com/vue-select-quantity/dist/style.css'
export default {
name: 'App',
components: {
VueSelectQuantity
},
data () {
return {
quantity: 1
}
},
methods: {
update (evt) {
const { id, qty } = evt
if (qty) {
this.quantity = qty
}
console.log(`update event received for id ${id} with quantity ${this.quantity}`)
},
remove (id) {
console.log(`remove event received for id ${id}`)
}
}
}
```
## Props
| Property name | Type | Default | Description |
| ------------- | ---- | ------- | ----------- |
| v-model | Number | null | A required property which represents the quantity to be updated |
| data-id | String | null | A data property to identify the component instance |
## Events
| Event name | Trigger |
| ------------- | ---- |
| update:quantity | Called when the quantity is changed (e.g., 1-9 is selected from the menu, Update button is clicked). Event object sent includes `id` and `qty` properties.|
| remove:quantity | Called when the 0 is selected from the menu) |
## Developers
Fork the project and enter the following commands:
git clone https://github.com/YOUR_GITHUB_USERNAME/vue-select-quantity.git
cd vue-select-quantity
npm install (for dependencies)
npm run dev