VueJs

Question

我在Vue.js建立一个dinamic类别

所以，我有四个输入：团队，性别，年龄，年级

每当其中一个输入更改时，我想更新屏幕上的文字，说明您选择的类别

所以，我认为每次输入更改时我都需要使用Computed属性而不是触发方法。

但是当我修改输入时，计算属性没有移动......

这是我的代码（仅用于输入以使其更清晰）： 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; 
        }
    }
});

这是一个概念问题，计算属性不是我想的，还是JS问题???

的Tx

Answer 1

只需将缓存设置为false

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