Develop Reference

I am working on exam portal using angular and spring boot, I got a problem here when i am using name as [name]

Component.html
<div class="bootstrap-wrapper" *ngIf="!isSubmit">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!-- instructions -->
<h2>Instructions</h2>
</div>
<div class="col-md-8">
<!-- questions -->
<ng-container *ngIf="questions">
<h2>{{questions[0].quiz.title}}</h2>
</ng-container>
<mat-card *ngFor="let q of questions, let i= index" class="mt20">
<mat-card-content>
<p> Q {{i+1}}) <span [innerHTML]="q.content"></span> </p>
<mat-divider></mat-divider>
<div class="row mt20" >
<div class="col-md-6">
<input type="radio" [value]="q.option1"
[name]="i"
// this is where i am getting error
[(ngModel)] ="q.givenAnswer"
/>
{{q.option1}}
{{i}}
</div>
<div class="col-md-6">
<input type="radio" [value]="q.option2"
[name]="i"
// this is where i am getting error
[(ngModel)] ="q.givenAnswer"
/>
{{q.option2}}
{{i}}
</div>
</div>
<div class="row mt20">
<div class="col-md-6">
<input type="radio" [value]="q.option3"
// this is where i am getting error
[name]="i"
[(ngModel)] ="q.givenAnswer"
/>
{{q.option3}}
{{i}}
</div>
<div class="col-md-6">
<input
type="radio"
[value]="q.option4"
// this is where i am getting error
[name]="i"
[(ngModel)] ="q.givenAnswer"
/>
{{q.option4}}
{{i}}
</div>
</div>
</mat-card-content>
</mat-card>
<div class="container text-center mt20">
<button (click)="submitQuiz()" mat-raised-button color="accent">Submit
Quiz</button>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
<!-- Show Result -->
<div class="bootstrap-wrapper" *ngIf="isSubmit">
<div class="row">
<div class="col-md-6 offset-md-3">
<mat-card>
<mat-card-header>
<mat-card-title>
<h1 class="text-center mall">Quiz Result</h1>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<h1>Marks Obtained: {{marksGot}}</h1>
<h1>Correct Ansers: {{correctAnswers}}</h1>
<h1>Questions Attempted: {{attempted}}</h1>
</mat-card-content>
<mat-card-actions>
<button mat-raised-button color="accent">Print</button>
<button mat-raised-button color="accent" [routerLink]="'/user-
dashboard/0'">Home</button>
</mat-card-actions>
</mat-card>
</div>
</div>
</div>
Component.ts
import { LocationStrategy } from '#angular/common';
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { QuestionService } from 'src/app/services/question.service';
import Swal from 'sweetalert2';
#Component({
selector: 'app-start-quiz',
templateUrl: './start-quiz.component.html',
styleUrls: ['./start-quiz.component.css']
})
export class StartQuizComponent implements OnInit {
qid;
questions;
marksGot = 0;
correctAnswers = 0;
attempted = 0;
isSubmit = false;
constructor(private locationSt: LocationStrategy, private _route: ActivatedRoute, private
_question: QuestionService) { }
ngOnInit(): void {
this.preventBackButton();
this.qid = this._route.snapshot.params['qid'];
this.loadQuestions();
}
loadQuestions() {
this._question.getQuestionsOfQuizForTest(this.qid).subscribe(
(data: any) => {
this.questions = data;
this.questions.forEach((q) => {
q['givenAnswer'] = '';
});
console.log(data);
},
(error) => {
Swal.fire('Error', 'Error in loading questions of quiz', 'error');
}
);
}
preventBackButton() {
history.pushState(null, null, location.href);
this.locationSt.onPopState(() => {
history.pushState(null, null, location.href);
})
}
submitQuiz() {
Swal.fire({
title: 'Do you want to Submit quiz?',
showCancelButton: true,
confirmButtonText: 'Submit Quiz',
icon: 'info',
}).then((e) => {
if (e.isConfirmed) {
//calculation
this.isSubmit=true;
this.questions.forEach((q) => {
if (q.givenAnswer == q.answer) {
this.correctAnswers++;
let marksSingle = this.questions[0].quiz.maxMarks / this.questions.length;
this.marksGot += marksSingle;
}
if (q.givenAnswer.trim() != '') {
this.attempted++;
}
});
console.log("Correct Answers " + this.correctAnswers);
}
})
}
}
enter image description here
When i am name as [name] it is showing number is not assignable to type String and when i am using name it is compiling successfully but i have three questions in a quiz and while selecting an option of a particular question other options of other questions are getting deselected. what to do?
Thanks in Advance

[(ngModel)]="q.givenAnswer" type="radio" [value]="q.option1" name={{i}}

How to pass Books array length to the parent component from child component in vue.js?

I am developing one page which is responsible from displaying books and the response is coming from backend API, DisplayBooks.vue component is imported inside a Dashboard.vue (parent-component).inside DisplayBooks.vue it contains books [] array , i want to pass this length to the Dashboard.vue component ,How to acheive this thing please help me to fix this thing..
Dashboard.vue
<template>
<div class="main">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="../assets/education.png" alt="notFound" class="education-image" />
</div>
<ul class="nav navbar-nav">
<li>
<p class="brand">Bookstore</p>
</li>
</ul>
<div class="input-group">
<i #click="handlesubmit();" class="fas fa-search"></i>
<div class="form-outline">
<input type="search" v-model="name" class="form-control" placeholder='search...' />
</div>
</div>
<ul class="nav navbar-nav navbar-right" id="right-bar">
<li><a> <i class="far fa-user"></i></a></li>
<p class="profile-content">profile</p>
<li #click="shownComponent='Cart'"><a><i class="fas fa-cart-plus"></i></a></li>
<p class="cart-content" >cart <span class="length" v-if="booksCount">{{booksCount}}</span></p>
</ul>
</div>
<div class="mid-body">
<!-- i want to display books length here -->
<h6>Books<span class="items">({{books.length}})</span></h6>
<select class="options" #change="applyOption">
<option disabled value="">Sort by relevance</option>
<option value="HighToLow">price:High to Low</option>
<option value="LowToHigh">price:Low to High</option>
</select>
</div>
<div v-if="flam==false">
<h2>Hello</h2>
</div>
<DisplayBooks v-show="flag==='noOrder' && shownComponent==='DisplayBooks'" #update-books-count="(n)=>booksCount=n" />
<Cart v-show=" shownComponent==='Cart'" />
<sortBooksLowtoHigh v-show="flag==='lowToHigh'" #update-books-count="(n)=>booksCount=n" />
<sortBooksHightoLow v-show="flag==='highToLow'" #update-books-count="(n)=>booksCount=n" />
</div>
</template>
<script>
import sortBooksLowtoHigh from './sortBooksLowtoHigh.vue'
import sortBooksHightoLow from './sortBooksHightoLow.vue'
import DisplayBooks from './DisplayBooks.vue'
import Cart from './Cart.vue'
export default {
components: {
DisplayBooks,
sortBooksLowtoHigh,
sortBooksHightoLow,
Cart
},
data() {
return {
shownComponent:'DisplayBooks',
booksCount:0,
flag: 'noOrder',
brand: 'Bookstore',
name: '',
flam: true,
visible: true,
}
},
methods: {
flip() {
this.flam = !this.flam;
},
applyOption(evt) {
if (evt.target.value === "HighToLow") {
this.flag = 'highToLow';
} else this.flag = 'lowToHigh';
},
}
}
</script>
DisplayBooks.vue
<template>
<div class="carddisplay-section">
<!-- <div class="mid">
<h6>Books<span class="items">({{books.length}})</span></h6>
</div> -->
<div v-for="book in books" :key="book.id" class="card book" >
<div class="image-section" #mouseover="book.hover = true" #mouseleave="book.hover = false">
<div class="image-container">
<img v-bind:src="book.file" />
</div>
</div>
<div class="title-section" >
{{book.name}}
</div>
<div class="author-section">
by {{book.author}}
</div>
<div class="price-section">
Rs. {{book.price}}<label class="default">(2000)</label>
</div>
<div class="buttons">
<div class="button-groups" v-if="!addedBooks.includes(book.id)">
<button type="submit" #click="handleCart(book.id);toggle(book.id);addedBooks.push(book.id)" class="AddBag">Add to Bag</button>
<button class="wishlist">wishlist</button>
</div>
<div class="AddedBag" v-else>
<button class="big-btn" #click="removeFromCart(book.id);addedBooks=addedBooks.filter(id=>id!==book.id)">Added to Bag</button>
</div>
</div>
<div class="description" v-if="book.hover">
<p class="hovered-heading">BookDetails</p>
{{book.description}}
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default {
mounted() {
service.userDisplayBooks().then(response => {
let data = response.data;
data.map(function(obj) {
obj.hover = false;
return obj;
});
this.books.push(...data);
return response;
})
},
data() {
return {
isActive:true,
result: 0,
authorPrefix: 'by',
pricePrefix: 'Rs.',
defaultStrikePrice: '(2000)',
buttonValue: 'Add to Bag',
buttonWishlist:'wishlist',
buttonAddedBag:'Added to Bag',
flag: true,
state: true,
addedBooks:[],
clickedCard: '',
books: [] // i want to display this array length
}
},
watch:{
addedBooks:{
handler(val){
this.$emit('update-books-count',val.length)
},
deep:true
}
},
methods: {
toggleClass: function(event){
this.isActive = !this.isActive;
return event;
},
toggle(id) {
this.clickedCard = id;
console.log(this.clickedCard);
},
flip() {
this.state = !this.state;
},
Togglebtn() {
this.flag = !this.flag;
},
handleCart(bookId){
let userData={
id: bookId,
}
service.userUpdateCart(userData).then(response=>{
return response;
}).catch(error=>{
alert("error while displaying Books");
return error;
})
},
removeFromCart(bookId){
let userData={
id:bookId,
}
service.userRemoveFromCart(userData).then(response=>{
return response;
}).catch(error=>{
alert("error while removing from cart");
return error;
})
}
}
}
</script>

How can I separate values from reusable checkbox in vuejs?

My question might not match to the problem that I am facing, So, I will explain it in detail here.
This is code for SeparateTechnology.vue. I have removed a few methods to make code shorter.
<template>
<div>
<div v-for="mss in ms" :key="mss.name">
<section class="container shadow-box techno-box" v-if="mss.name==selected">
<p>Review the software criteria below and ensure that you complete each section</p>
<h4>{{mss.name}}</h4>
<div class="row shadow-box">
<div class="col-sm-12 col-lg-6">
<p>Select all that apply</p>
<div class="dropdown">
<input
v-model.trim="inputValue"
class="dropdown-input"
type="text"
placeholder="Search for your Solution"
/>
<div class="dropdown-list" v-show="selected">
<div
v-show="itemVisible(item)"
v-for="item in mss.subMenu"
:key="item"
class="dropdown-item"
>
{{ item }}
<button
class="button button-mini button-dark button-rounded itemLabel"
#click="selectSolution(item,mss)"
>
<i class="icon-line-plus"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6 rightList">
<div class="dropdown-list" v-show="selected" v-if="mss.selected_solutions!=''">
<div v-for="item in mss.selected_solutions" :key="item" class="dropdown-item">
{{ item }}
<button
class="button button-mini button-dark button-rounded deleteLabel"
#click="deleteSelectedItem(item,mss)"
>
<i class="icon-line-minus"></i>
</button>
</div>
</div>
<div v-else>
<div class="style-msg errormsg">
<div class="sb-msg">
<i class="icon-remove"></i>You have not selected any solutions.
</div>
</div>
</div>
<button
class="button button-mini"
#click="clearUserOptions(mss)"
v-if="mss.selected_solutions.length > 1"
>
<i class="icon-line-cross"></i>Clear all selection
</button>
</div>
<div style="padding:20px;"></div>
</div>
<div class="row">
<div class="col-sm-12 col-md-3 inputTitle">
<h5>Don't see it in the list above:</h5>
</div>
<input
class="col-sm-12 col-md-6"
type="text"
v-model="value"
#keydown.enter="getUserSolution(value,mss)"
placeholder="Enter your solution here.. "
/>
</div>
<div style="padding:20px;"></div>
<div class="row shadow-box">
<h5
class="col-sm-12"
>Identify how the software solution is leveraged within your organization</h5>
<div
v-for="item in mss.selected_solutions"
:key="item"
class="clearfix col-sm-12 col-md-6"
style="padding:20px"
>
<span v-if="mss.isDifferent=='campaign'">
<div class="card">
<h5 class="card-header">{{item}}</h5>
<CheckBox
:groups="campaignMangment"
name="campaignMangment"
:value="item"
classProp="col-sm-12"
#clicked-show-detail="clickedShowDetailModal"
/>
{{item}} and {{productSelected}}
</div>
</span>
</div>
</div>
<button class="btn btn-primary" #click="postUserDetails(mss)">Submit</button>
</section>
</div>
</div>
</template>
<script>
import CheckBox from "../../../components/checkbox/Checkbox";
export default {
name: "technology",
data() {
return {
usageValue: "",
value: "",
campainCheckedNames: [],
checked: "",
productSelected: [],
checkedValues: "",
exists: null,
inputValue: "",
campaignMangment: [
"Business to Customer (B2C)",
"Business to Business (B2B)",
"Customer to Customer (C2C)",
"Customer to Business (C2B)",
"E-Government",
"M-Commerce",
],
};
},
props: ["ms", "selected"],
//method to show all the solutions that contains the user
methods: {
clickedShowDetailModal: function (campainCheckedNames) {
console.log(campainCheckedNames);
this.productSelected.push(campainCheckedNames);
},
},
components: {
CheckBox,
},
};
</script>
This is CheckBox.vue
<template>
<div class="row col-mb-0">
<div
:class="classProp + ' checkbox-margin'"
v-for="singleSelector in groups"
:key="singleSelector"
>
<div>
<input
:id="singleSelector+groupId"
:value="singleSelector"
class="checkbox-style"
type="checkbox"
v-model="checkedValues"
#change="showDetailModal"
/>
<label :for="singleSelector +groupId" class="checkbox-style-3-label">{{singleSelector}}</label>
</div>
</div>
</div>
</template>
<script>
let groupId = 0;
export default {
props: {
groups: Array,
name: String,
classProp: String,
value: String,
},
data() {
return {
groupId: groupId++,
checkedValues: [],
inputs: {},
};
},
methods: {
showDetailModal: function (e) {
this.$set(this.inputs, this.value, e.target.value);
this.$emit("clicked-show-detail", this.inputs);
},
},
};
</script>
<style scoped>
.checkbox-margin {
margin-bottom: 10px;
}
</style>
Right Now, the line {{item}} and {{productSelected}} prints output like below as shown in screenshot
.
Problem: On every click/unclick of checkbox it adds an item to an array and not in the format I want. and if I select the checkbox on left only, it adds that item on right as well as shown in the screenshot above. It is due to the same array declaration, but I couldn't think more than that.
Expected Output: For every selected item, I want to print the list of selected checkboxes in an array format like below.
"selected_solutions": [{
"name": "Adobe Campaign",
"usage": [ "Business to Customer",...]
}, {
"name": "Marin Software",
"usage": ["M-Commerce",...]
}]
Even small hints or tips would be more than appreciated. I don't mind posting code on gist if required. Thank you.

With checkbox-components you want to emit "event.target.checked" likeso:
this.$emit('input', event.target.checked)
That way it'll behave like a checkbox and you can use a v-model on the parent:
<CheckBox v-model="item.checked" ...>
I do not use v-model inside the component and instead just bind :checked="value", but that might be up to preference. But using both :value and v-model could (should?) cause problems because v-model is actually a :value + emitter under the hood (or so I heard).
Anyway, here is my minimal reusable checkbox-wrapper:
<template>
<input type="checkbox" :checked="value" #change="handleChange" />
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
name: 'MyCheckbox',
props: {
value: { type: Boolean, default: false }
},
methods: {
handleChange(event) {
this.$emit('input', event.target.checked)
}
}
})
</script>
After that is done you can just filter on checked items:
computed: {
checkedSolutions(){
return this.ms[0].selected_solutions
.filter( solution => solution.checked );
}
}

Vue.js How can i emit events between router-view components

I am building an e-commerce website using vue.js and an api as backend,
i have a root component called Main.vue
which had a navigation of router-link and a body of router-view.
in a route called Cart.vue when a user updated quantity of some product i need Cart.vue to $emit an event to the root component Main.vue to trigger a function called getCartTotal()
hint Cart.vue is not a child component of Main.vue
Main.vue :
<template>
<div>
<div>
<div v-on:getCartAgain="getCartTotal()" id="top-header" class="has-background-ishtari">
<div class="container" style="padding:5px 0">
<div class="is-hidden-mobile" style="font-size: 13px">
<div
class="has-text-white has-text-right"
style="display: flex;align-items: center;justify-content: flex-end"
>
<i class="icon material-icons" style="margin-right: 0px;">attach_money</i>
<span style="margin-right:15px">Best Deals</span>
<i class="icon material-icons" style="margin-right: 5px;">low_priority</i>
<span style="margin-right: 15px">Free & Easy Returns</span>
<i class="icon material-icons" style="margin-right: 5px;">local_shipping</i>
<span>Free Delivery (OVER $100)</span>
</div>
</div>
</div>
<div class="container" style="padding:10px 0">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div id="header-logo" #click="openHomePage()">
<img src="../assets/images/logo-ishtari.png" class width="140" />
</div>
<div style="flex-grow: 2;margin:0 40px">
<p class="control is-expanded">
<input
id="header-search"
class="input is-radiusless"
style="height: 35px;"
type="text"
placeholder="What are you looking for?"
/>
</p>
</div>
<div
class="has-text-white"
style="display: flex;align-items: center;justify-content: space-between"
>
<div style="display: flex;align-items: center;padding-right:10px">
<span>Login Or SignUp</span>
<i class="icon material-icons">arrow_drop_down</i>
</div>
<div
id="cart-container"
style="display: flex;align-items: center;padding-left: 15px;border-left:1px solid rgba(255,255,255,0.5)"
#click="openCartPage()"
>
<span style="margin-right:5px">Cart</span>
<span>
<i class="icon material-icons">shopping_cart</i>
<span
class="has-background-ishtari-blue is-paddingless"
:class="this.cartCount.length == 0 ? 'button is-loading' : ''"
id="cart-total"
>{{this.cartCount}}</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<vue-page-transition name="fade-in-right">
<router-view></router-view>
</vue-page-transition>
</div>
</template>
<script>
import VueCookies from "vue-cookies";
export default {
data() {
return {
showNav: false,
cartCount: "",
readyToken: false
};
},
created() {
this.checkToken();
},
mounted() {
this.getCartTotal();
},
methods: {
openCartPage() {
this.$router.push({ name: "cart" }).catch(err => {
return err;
});
},
openHomePage() {
this.$router.push({ name: "home" }).catch(err => {
return err;
});
},
checkToken() {
if (!VueCookies.isKey("token")) {
let requestBody = {
client_id: "shopping_oauth_client",
client_secret: "shopping_oauth_secret"
};
let requestHeader = {
"Content-Type": "application/x-www-form-urlencoded",
Authorization:
"Basic c2hvcHBpbmdfb2F1dGhfY2xpZW50OnNob3BwaW5nX29hdXRoX3NlY3JldA",
"Access-Control-Allow-Origin": "*",
"Cache-Control": null,
"X-Requested-With": null
};
window.axios
.post(window.main_urls["get-token"], requestBody, {
headers: requestHeader
})
.then(response => {
VueCookies.set("token", response.data.access_token);
});
} else {
console.log(VueCookies.get("token"));
}
},
getCartTotal() {
console.log("here");
let requestHeader = {
Authorization: "Bearer " + VueCookies.get("token"),
"Access-Control-Allow-Origin": "*",
"Cache-Control": null,
"X-Requested-With": null
};
window.axios
.get(window.main_urls["get-cart"], { headers: requestHeader })
.then(response => {
if (response.data.error === "Cart is empty") {
console.log(response.data);
this.cartCount = 0;
} else {
this.cartCount = response.data.data.products.length.toString();
}
});
}
}
};
</script>
<style>
</style>
And Cart.vue :
<template>
<div class="has-background-ishtari-grey">
<div class="container">
<div>
<section v-if="this.loading || this.emptyCart" class="hero is-fullheight-with-navbar">
<div
v-if="this.loading"
class="button is-loading hero is-fullheight-with-navbar has-background-ishtari-grey"
style="border: none"
>Please Wait</div>
<div v-if="! this.loading && this.emptyCart" class="hero-body">
<div class="container has-text-centered">
<i class="material-icons has-text-grey" style="font-size: 80px">shopping_cart</i>
<h1 class="title has-text-grey has-text-weight-bold is-4">Your Shopping Cart Is Empty</h1>
<h2 class="subtitle title has-text-grey is-6">what are you waiting for</h2>
<br />
<button
#click="goHome()"
class="button is-ishtari-blue is-outlined has-text-weight-bold is-7"
>START SHOPPING</button>
</div>
</div>
</section>
</div>
<div class="section" v-if="! this.loading && !this.emptyCart">
<div class="columns is-bordered" id="cart-products-container">
<div class="column is-9" style="margin-right:20px">
<h1
class="subtitle has-text-weight-bold is-4"
>My Cart ({{this.cartData.products.length}} items)</h1>
<img
src="https://storage.googleapis.com/noon-cdn-res/rn/banners/en_disclaimer-cart-desktop.gif"
style="margin-bottom:15px"
/>
<div
class="cart-product-row has-background-white"
style="padding:10px 15px"
v-for="product in cartData.products"
:key="product.product_id"
>
<div
class="columns padding-top:20px"
:class="product.stock ? '' : 'has-background-danger'"
>
<div class="image is-128x128 column is-narrow">
<img :src="product.thumb" />
</div>
<div
class="column"
style="display:flex;flex-direction:column;justify-content:space-between"
>
<p
class="has-text-grey subtitle is-7 is-marginless"
style="margin-bottom:10px !important"
>{{product.model}}</p>
<p class="has-text-weight-bold" style="font-size:14px">{{product.name}}</p>
<p>
<i #click="product.quantity = 0;updateCartQuantity(product.key,0)" class="material-icons has-text-grey" id="cart-delete">delete</i>
</p>
</div>
<div
class="column is-narrow"
style="padding-left:15px;display:flex;flex-direction:column;justify-content:center"
>
<p class="has-text-weight-bold">{{product.price}}</p>
</div>
<div
class="column is-narrow"
style="display:flex;flex-direction:column;justify-content:center"
>
<div class="field has-addons">
<p class="control">
<a
#click="product.quantity = Number(product.quantity) - 1;updateCartQuantity(product.key,product.quantity)"
class="button"
>-</a>
</p>
<p class="control">
<input
class="input has-text-centered"
type="text"
placeholder="0"
style="width:80px"
readonly
:value="product.quantity"
:ref="product.product_id"
/>
</p>
<p class="control">
<a
class="button"
#click="product.quantity = Number(product.quantity) + 1;updateCartQuantity(product.key,product.quantity)"
>+</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="column is-narrow" style=" align-self:flex-start;margin-top:10px">
<div style="border:1px solid #eee; background:#f7f9fe; padding:20px 15px">
<div class="field has-addons">
<p class="control">
<input class="input is-ishtari-green" type="text" placeholder="Coupon Code" />
</p>
<p class="control">
<a class="button is-ishtari-green">Apply</a>
</p>
</div>
<div class="columns">
<div class="column">
<p class="has-text-weight-bold">Order Summary</p>
</div>
</div>
<div class="columns"></div>
<div v-for="total in cartData.totals" :key="total.code">
<div class="columns">
<div class="column">
<p>{{total.title}}</p>
</div>
<div class="column is-narrow">
<p>{{total.text}}</p>
</div>
</div>
</div>
</div>
<button
class="button is-ishtari-blue has-text-weight-bold"
style="display:block;width:100%;margin-top:10px"
>CHECKOUT NOW</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import VueCookies from "vue-cookies";
export default {
data() {
return {
cartData: [],
emptyCart: false,
loading: true
};
},
created() {
this.getCartContent();
},
methods: {
goHome() {
this.$router.push({ name: "home" }).catch(err => {
return err;
});
},
getCartContent() {
let requestHeader = {
Authorization: "Bearer " + VueCookies.get("token")
};
window.axios
.get(window.main_urls["get-cart"], { headers: requestHeader })
.then(response => {
if (response.data.error === "Cart is empty") {
this.emptyCart = true;
this.loading = false;
} else {
this.loading = false;
this.cartData = response.data.data;
}
});
},
updateCartQuantity(pkey, pquan) {
this.loading = true;
let requestHeader = {
Authorization: "Bearer " + VueCookies.get("token")
};
let requestBody = {
key: pkey.toString(),
quantity: pquan.toString()
};
window.axios
.put(window.main_urls["get-cart"], requestBody, {
headers: requestHeader
})
.then(response => {
if (response.data.success == "1") {
this.getCartContent();
this.$emit("getCartAgain");
}
});
},
}
};
</script>
<style scoped la>
.cart-product-row {
border-bottom: 1px solid #eee;
padding: 10px 0;
}
.cart-product-row:last-of-type {
border-bottom: none;
}
#cart-delete {
font-size: 20px;
cursor: pointer;
}
#cart-delete:hover{
transform: scale(1.05);
}
</style>
I need the function called updateCartQuantity() in Cart.vue to trigger the function called getCartTotal() in Main.vue

Vuex may be a bit more than you need here. You can just use the pub/sub technique by creating a simple file that exports a new vue instance, you can then listen to events emitted on that Vue instance:
//bus.js
import Vue from 'vue'
export default new Vue()
Then in your Main.vue you can import that:
import EventBus from '#/path/to/bus'
And in your created hook you can set up a listener:
created() {
EventBus.$on('refresh_cart_total', this.getCartTotal)
}
And you can $emit that event from your Cart.vue when you need to. Once again, import the bus:
import EventBus from '#/path/to/bus'
Then in your Cart.vue call it whenever you need:
EventBus.$emit('refresh_cart_total')
Now you have a bi-directional pub/sub system in place and you don't need to introduce Vuex for a simple task such as this.
Bonus
To keep things DRY you could also implement constants within your bus.js, such as:
export const REFRESH_CART_TOTAL = 'refresh_cart_total'
And now you can use import * as CART_CONSTANTS from '/path/to/bus' and use this method:
EventBus.$on(CART_CONSTANTS.REFRESH_CART_TOTAL, this.getCartTotal)
and:
EventBus.$emit(CART_CONSTANTS.REFRESH_CART_TOTAL)

Conversation chat cannot submit

I have problem when make submit chat its have error 'handlebar is not define'. I follow tutorial code in this link : https://codepen.io/drehimself/pen/KdXwxR
this is the error :
here my html code :
<div class="chat-area scrollbar-macosx scroll-wrapper">
<div class="chat-area-content scrollbar-macosx">
<ul class="container">
<!-- Label Time Chat -->
<div class="text-center mt-3">
<span class="label-time">30 Apr</span>
</div>
<!-- Merchant chat -->
<div class="d-flex justify-content-start mt-3">
<div class="chat-content-image">
<div class="upload-image">
<div class="time-image">
<span class="time-item">14:10</span>
</div>
</div>
</div>
</div>
<!-- Customer chat -->
<div class="d-flex justify-content-start mt-3">
<div class="chat-context">
<div class="chat-text">
<p></p>
</div>
<div class="chat-time">
<p>14:15</p>
</div>
</div>
</div>
<!-- Customer Chat -->
<div class="d-flex justify-content-end mt-3 mb-4">
<div class="chat-context">
<div class="chat-text">
<p></p>
</div>
<div class="chat-time">
<p>15:00</p>
</div>
</div>
</div>
</ul>
</div>
<form class="keyboard-chat">
<div class="chat-input">
<div class="attach-button mr-3 mb-3">
<button type="button" class="circle-button">
<i class="fa fa-plus"></i>
</button>
</div>
<div class="chat-input-textarea" style="padding-left: 0px;">
<div>
<textarea id="message-to-send" name="message-to-send" placeholder="Type here..." rows="3" class="keyboards f-size-12" style="max-height: 130px;"></textarea>
</div>
</div>
<div class="btn-submit-message mb-3"></div>
</div>
</form>
</div>
<script id="message-template" type="text/x-handlebars-template">
<div class="d-flex justify-content-end mt-3">
<div class="chat-context">
<div class="chat-text">
<p>{{messageOutput}}</p>
</div>
<div class="chat-time">
<p>{{time}}</p>
</div>
</div>
</div>
</script>
And here my js :
(function(){
var chat = {
messageToSend: '',
messageResponses: [
'Why did the web developer leave the restaurant? Because of the table layout.',
'How do you comfort a JavaScript bug? You console it.',
'An SQL query enters a bar, approaches two tables and asks: "May I join you?"',
'What is the most used language in programming? Profanity.',
'What is the object-oriented way to become wealthy? Inheritance.',
'An SEO expert walks into a bar, bars, pub, tavern, public house, Irish pub, drinks, beer, alcohol'
],
init: function() {
this.cacheDOM();
this.bindEvents();
this.render();
},
cacheDOM: function() {
this.$chatHistory = $('.chat-area-content');
this.$button = $('.btn-submit-message');
this.$textarea = $('#message-to-send');
this.$chatHistoryList = this.$chatHistory.find('ul');
},
bindEvents: function() {
this.$button.on('click', this.addMessage.bind(this));
this.$textarea.on('keyup', this.addMessageEnter.bind(this));
},
render: function() {
this.scrollToBottom();
if (this.messageToSend.trim() !== '') {
var template = Handlebars.compile( $("#message-template").html());
var context = {
messageOutput: this.messageToSend,
time: this.getCurrentTime()
};
this.$chatHistoryList.append(template(context));
this.scrollToBottom();
this.$textarea.val('');
// responses
var templateResponse = Handlebars.compile( $("#message-response-template").html());
var contextResponse = {
response: this.getRandomItem(this.messageResponses),
time: this.getCurrentTime()
};
setTimeout(function() {
this.$chatHistoryList.append(templateResponse(contextResponse));
this.scrollToBottom();
}.bind(this), 1500);
}
},
addMessage: function() {
this.messageToSend = this.$textarea.val()
this.render();
},
addMessageEnter: function(event) {
// enter was pressed
if (event.keyCode === 13) {
this.addMessage();
}
},
scrollToBottom: function() {
this.$chatHistory.scrollTop(this.$chatHistory[0].scrollHeight);
},
getCurrentTime: function() {
return new Date().toLocaleTimeString().
replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3");
},
getRandomItem: function(arr) {
return arr[Math.floor(Math.random()*arr.length)];
}
};
chat.init();
})();
Code of .js same like in the tutorial, but i only change the name class i used.
My Expectation is when i enter / click button send, the conversation is submited to the chat area.

This code requires Handlebars JS since you call Handlebars. You can it install it by follwing the installation steps on the website.