I’m still getting the hang of Vue.js (Vuebie?), and while I know this question has been asked before, I’ve not quite stumbled upon a solution myself.
My current challenge involves passing an object to a method in order to increment a value and then display the total value.
Every attempt I’ve made so far results in either a
method / prop not defined on instance but referenced during renderThis particular template is deeply nested within other templates, which leaves me uncertain about how or where to properly define my getCollectionsTotal method.
<template>
<div>
<ul class="c-filter__list" v-if="categories.length">
<li
class="c-filter__list__items"
v-for="(category, index) in categories"
:key="index"
@click.stop="setCurrentCategory(category)"
>
{{ getCollectionTotal(category) }} // Sending the category object to my method
<a
v-bind:class="{
'is-selected': filters.category.includes(category.category_name)
}"
class="c-link c-link--filter"
>{{ category.category_name }}
<span>({{ category.collections_number }})</span>
</a>
</li>
</ul>
<div id="collectionsTotal">{{ collectionsTotal }}</div> // Displaying the total here
</div>
</template>
<script>
import state from "../store/index";
import { mapState } from "vuex";
export default {
name: "categories-sidebar",
computed: mapState(["filters", "categories"]),
methods: {
setCurrentCategory: function(category) {
if (this.filters) {
this.filters.category.includes(category.category_name)
? state.commit("delCategory", category.category_name)
: state.commit("setCategory", category.category_name);
}
},
getCollectionTotal(cat) {
let collectionsTotal; // Warning says ‘assigned a value but never used’
collectionsTotal += cat.collections_number;
}
}
};
</script>