'TypeError: Cannot read properties of undefined (reading 'service')
When I try to run this code it gives me this error:
TypeError: Cannot read properties of undefined (reading 'service')
I don't know why. I have tried possible means, but it didn't work.
<template>
<div>
<div class="rating-overview" v-if="listReviews.length">
<div class="rating-overview-box">
<span class="rating-overview-box-total"> {{ reviewSummary.star }} </span>
<span class="rating-overview-box-percent">{{ __('out of 5.0') }}</span>
<div class="rating_wrap"><div class="rating"><div class="product_rate" :style="{ width: caculateWith(reviewSummary.star) + '%' }"></div></div></div>
</div>
<div class="rating-bars">
<template v-for="reviewField in reviewFields">
<div class="rating-bars-item" :key="reviewField['field']">
<span class="rating-bars-name">{{ __(reviewField['field']) }}</span>
<span class="rating-bars-inner">
<span class="rating-bars-rating high" :data-rating="reviewSummary.summary_avg[reviewField['field']]">
<span
class="rating-bars-rating-inner"
:style="{ width: caculateWith(reviewSummary.summary_avg[reviewField['field']]) + '%' }"
></span>
</span>
<strong>{{ reviewSummary.summary_avg[reviewField['field']] }}</strong>
</span>
</div>
</template>
</div>
</div>
<div class="property_block_wrap style-2" v-if="listReviews.length">
<div class="property_block_wrap_header">
<a
data-toggle="collapse"
data-target="#clEight"
aria-controls="clEight"
href="javascript:void(0);"
aria-expanded="true"
>
<h4 class="property_block_title">
{{ meta.total }} {{ __('Reviews') }}
</h4>
</a>
</div>
<div id="clEight" class="panel-collapse collapse show">
<div class="block-body">
<div class="author-review">
<div
class="comment-list"
>
<ul>
<li
class="article_comments_wrap"
v-for="item in listReviews"
:key="item.id"
>
<article>
<div class="article_comments_thumb">
<img
:src="item.user_avatar"
:alt="item.user_name"
/>
</div>
<div class="comment-details">
<div class="rating_wrap"><div class="rating"><div class="product_rate" :style="{ width: caculateWith(item.star) + '%' }"></div></div></div>
<div class="comment-meta">
<div class="comment-left-meta">
<h4 class="author-name">
{{ item.user_name }}
</h4>
<div class="comment-date">
{{ item.created_at }}
</div>
</div>
</div>
<div class="comment-text">
<p>{{ item.comment }}</p>
</div>
</div>
</article>
</li>
</ul>
</div>
</div>
<a
v-if="checkNextPage(meta)"
href="#"
@click.prevent="getListComments(meta.current_page + 1)"
class="reviews-checked theme-cl"
>
<i class="fas fa-arrow-alt-circle-down mr-2"></i>
{{ __('See More Reviews') }}
</a>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
isLoading: true,
listReviews: [],
meta: {},
reviewSummary: {},
};
},
props: {
reviewFields: {
type: Array,
required: true
},
apiGetReviews: {
type: String,
default: () => null,
required: true
},
apiGetRating: {
type: String,
default: () => null,
required: true
}
},
mounted() {
this.getListReviews();
this.getRatingOverview();
},
methods: {
checkNextPage(meta) {
return meta.total ? (meta.current_page * meta.per_page) < meta.total : false
},
caculateWith(value) {
return (value/5)*100
},
getRatingOverview() {
axios
.get(this.apiGetRating )
.then(res => {
this.reviewSummary = res.data.data
})
.catch(res => {
this.isLoading = false;
console.log(res);
});
},
getListReviews(page = 1) {
this.isLoading = true;
axios
.get(this.apiGetReviews + "?page=" + page)
.then(res => {
this.listReviews = this.listReviews.concat(
res.data.data ? res.data.data : []
);
this.meta = res.data.meta;
this.isLoading = false;
})
.catch(res => {
this.isLoading = false;
console.log(res);
});
}
}
};
</script>
<div class="rating-bars-item"><span class="rating-bars-name">Service</span>
<span class="rating-bars-inner"><span data-rating="5" class="rating-bars-rating high">
<span class="rating-bars-rating-inner" style="width: 100%;"></span></span> <strong>5</strong>
</span>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<label for="select-star">Service</label>
<div class="br-wrapper br-theme-fontawesome-stars">
<select name="meta[service]" id="select-star-service" data-read-only="false" disabled="disabled" class="rating" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected="selected">5</option>
</select>
</div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|