Computed properties in VueJs

0
votes

I'm building a dynamic category in Vue.js

So, I have four inputs : Team, Gender, Age, Grade

Each time one of these input changes, I would like to update the text on the screen which says what category you are selecting.

So, I thought I needed to use Computed property instead of triggering a method each time an input is changed.

But When I modify an input, computed property is not moving...

Here is my code (for 1 input only to make it clearer): HTML:

<select v-model="gender" class="form-control" @change="getCategoryName" v-el:gender>
<option value="X">{{trans('core.mixt')}}</option>
<option value="1">{{trans('core.male')}}</option>
<option value="2">{{trans('core.female')}}</option>
</select>

JS: 

    new Vue({
    el: 'body',
    data: {
        isTeam: 1,
        categoryName: 'Individual Men init',
        gender: 'X',
        ageCategory: 0,
        genderValues: ['core.no_age', 'core.children', 'core.teenagers', 'core.adults', 'core.masters', 'core.custom'],
    },

    computed: {
        categoryFullName: function categoryFullName() {

            var isTeam = this.isTeam;
            var gender = this.gender;

            var ageIni = this.ageIni;
            var ageFin = this.ageFin;
            var $ageCategorySelect = this.$els.ageCategory;
            var ageCategoryOption = $ageCategorySelect.options[$ageCategorySelect.selectedIndex];
            var ageCategoryName = ageCategoryOption.text;

            var fullName = '';
            var myGender = gender == 'X' ? '' : gender;
            var myAgeCategory = ageCategoryOption.value == 0 ? '' : ageCategoryName;
            if (myAgeCategory == '' && myGender =='') myGender = 'Mixto';

            fullName = myAgeCategory + " " + myGender + " " + isTeam == 1 ? 'Team' : 'Individual';
            return fullName; 
        }
    }
});

Is it a conceptual issue and computed properties are not what I think, or is it a JS issue?

1
vue.js
You need to set a computed setter as well (currently, you only have a getter): vuejs.org/guide/computed.html#Computed-Setter Also, you can remove @change="getCategoryName". - nils
sidenote: when you assign fullname, you missed declaring it with var. That creates a global variable, wich I assume it not your intention (but also not related to your problem). - Linus Borg
Does this line work: fullName = myAgeCategory + " " + myGender + " " + isTeam == 1 ? 'Team' : 'Individual';. It seems like you need parenthesis. Also can you provide a js fiddle? - Nora

1 Answers

0
votes

Just set cache to false 

computed: {
        categoryFullName:  {
            cache: false,
            get: function(){ 
            }
        }
    }