[Bug] <Popup> language doesn't change when prop lang changed by computed property

Menark commented 4 years ago

Vue2-datepicker version: 3.0.1 Vue version: 2.6.10 Browser: Chrome 78.0.3904.108

Steps to reproduce Adding :lang prop with computed property which return object with custom localization depending on site localization (ru or en) . Change site localizaion by button. Open DatePicker.

Reproduction Link or Source Code Ru:

  "day_of_week": {
    "1": "Пн",
    "2": "Вт",
    "3": "Ср",
    "4": "Чт",
    "5": "Пт",
    "6": "Сб",
    "7": "Вс"
  },

  "month_short": {
    "jan": "Янв",
    "feb": "Фев",
    "mar": "Мар",
    "apr": "Апр",
    "may": "Май",
    "jun": "Июн",
    "jul": "Июл",
    "aug": "Авг",
    "sep": "Сен",
    "oct": "Окт",
    "nov": "Ноя",
    "dec": "Дек"
  },

En:

  },
  "month_short": {
    "jan": "Jan",
    "feb": "Feb",
    "mar": "Mar",
    "apr": "Apr",
    "may": "May",
    "jun": "Jun",
    "jul": "Jul",
    "aug": "Aug",
    "sep": "Sep",
    "oct": "Oct",
    "nov": "Nov",
    "dec": "Dec"
  },

  "day_of_week": {
    "1": "Mon",
    "2": "Tue",
    "3": "Wed",
    "4": "Thu",
    "5": "Fri",
    "6": "Sat",
    "7": "Sun"
  },

DatePicker:

    <DatePicker
      ref="datePicker"
      v-model="dateRange"
      type="date"
      range
      :placeholder="$t('calendar.select_date_range')"
      class="date-range-picker__picker"
      :lang="currentDatePickerLang"
      @change="onDatePickerChange"
    />

Computed propperty:

  get currentDatePickerLang() {
    return {
      formatLocale: {
        monthsShort: [
          this.$t('month_short.jan'),
          this.$t('month_short.feb'),
          this.$t('month_short.mar'),
          this.$t('month_short.apr'),
          this.$t('month_short.may'),
          this.$t('month_short.jun'),
          this.$t('month_short.jul'),
          this.$t('month_short.aug'),
          this.$t('month_short.sep'),
          this.$t('month_short.oct'),
          this.$t('month_short.nov'),
          this.$t('month_short.dec'),
        ],
        weekdaysMin: [
          this.$t('day_of_week.7'),
          this.$t('day_of_week.1'),
          this.$t('day_of_week.2'),
          this.$t('day_of_week.3'),
          this.$t('day_of_week.4'),
          this.$t('day_of_week.5'),
          this.$t('day_of_week.6'),
        ],
        firstDayOfWeek: 1,
        firstWeekContainsDate: 1,
      },
      yearFormat: 'YYYY',
      monthFormat: 'MMM',
      monthBeforeYear: true,
    };
  }

Expected behavior Month, year, weekdays language names should change depending on current lang prop.

Actual behavior Month, year, weekdays names don't change depending on current lang prop. Prop works well. Components TableMonth and others use injected locale, which changes only on mount.

Menark commented 4 years ago

The problem can be bypassed by adding :key. But it doesn't solve problem.

mengxiong10 commented 4 years ago

Yes, you can forceupdate by add :key now. I'll fix the bug soon.

    <DatePicker
      ref="datePicker"
      v-model="dateRange"
      :lang="lang"
      :key="lang"
   />

import 'vue2-datepicker/locale/ru'

export default {
  data() {
    return {
      lang: 'en',  
   };
  },
  methods: {
    changeLocale() {
      this.lang = this.lang === 'en' ? 'ru' : 'en';
    },
  },
};

Menark commented 4 years ago

Thank you.

mengxiong10 commented 4 years ago

v3.2.2 fixed it.

mengxiong10 / vue2-datepicker

[Bug] <Popup> language doesn't change when prop lang changed by computed property #391