As I work on developing the checkout page for an e-commerce app, I encounter the need to display a list of OrderItems from the database, each with its price and quantity. These items can be selected and grouped together. Additionally, I must also include a separate list of "addons" for the basket, which are also OrderItems but of a different type.
To accomplish this, I have implemented a Vue.js component that renders an array of OrderItems for selection. My initial approach involves rendering the same component twice. However, the "selected" property currently only supports models from one list or the other, but not both simultaneously. I aim to enhance the functionality so that the selected prop can contain items from both lists (basic OrderItems and addons).
For the code and a live demo, please refer to the following links:
JS Fiddle: https://jsfiddle.net/w8vfb64L/
Template:
<!-- Template code goes here -->Javascript:
var implementationDetails = new Vue();
var customComponent = Vue.component('custom-component', {
template: '#custom-template',
props: {
entries: [Array, Object],
selected: Array,
addons: Array,
frequencies: [Array, Object],
},
created: function() {
this.entriesCopy = this.entries;
this.selectedCopy = this.selected;
},
watch: {
selectedCopy: function(val, oldVal) {
implementationDetails.$emit('selected-updated', val);
}
},
data: function() {
return {
entriesCopy: [],
selectedCopy: []
}
}
});
new Vue({
el: '#app',
data: {
// data properties here
},
components: {
'customComponent': customComponent,
},
created: function() {
var temp = this;
implementationDetails.$on('selected-updated', function(selected) {
Vue.set(temp, 'selected', selected);
});
},
computed: {
// computed properties here
}
});