Standalone component on a e-commerce site using vue.js
Question
I got this assignment and since I am new with Vue.js, I could use some help. Does anyone know how to do this: Create a standalone Vue.js component named QuantityInput for the purpose of entering product quantity in various scenarios on an eCommerce website. The component should accept the following properties:
initial/selected/entered value: Number (non-negative integer)
select-min: minimum value for select list, Number (non-negative integer)
select-max: maximum value for select list, Number (non-negative integer)
The component should always display select list unless user explicitly chooses to enter the value (by selecting 10+ which is the last option), when it displays text input. In the event of value change input event should be emitted.
Here is the link that might help: https://bloomgroove.com/ Put something in a cart and click on it. There you should see that component in action.
1 answers
solution1
0 2019-07-28 17:23:17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<list-app></list-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.component('list-app', {
template: `
<div>
<h2>Quantity input</h2>
<select v-model="selected" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10+</option>
</select>
<div>
<input type="number" style="width:50px" />
<button v-on:click="update">Update</button>
</div>
<span>Cart: ({{ selected }}) </span>
</div>
`,
data() {
return {
numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
cart: 0,
selected: 0
}
},
methods: {
update(value) {
this.selected = value
}
}
});
var app = new Vue({
el: '#app',
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.