Vuejs: как динамически обновлять значение переменной

#vue.js #vuejs2 #vue-cli

#vue.js #vuejs2 #vue-cli

Вопрос:

я новичок здесь, я хочу обновить значение переменной day, это будет реализовано в vuejs-datepicker, это выглядит как изображение ниже :

введите описание изображения здесь

Это мой код :

 data() {
    var day = null
    
    var state = {
        disabledDates: {
            days: [day], // 0,1 (value of the day)
        }
    }
    return {

        state: state,
        day: day,
    }
},
watch: {
    'day': function(day){
        console.log('day: ' day)
        return this.day
    },
},
  

Это мое ожидаемое изображение, после того, как значение дня равно 0,1 :

введите описание изображения здесь

Спасибо..

Комментарии:

1. Непонятно, о чем вы здесь спрашиваете. Вы говорите, что хотите «обновить переменную дня» , но вы никогда не присваиваете ей значение, отличное от null . Используете ли вы это в v-model или что-то в этом роде? В чем смысл вашего наблюдателя? Для чего это state ? Оно никогда не используется

2. подождите, я хочу обновить свой код

3. состояние используется в библиотеке vuejs-datepicker

4. Я не использую v-model, но я хочу изменить значение day of watch

5. Тогда как вы изменяете значение переменной day days: [day]

Ответ №1:

Похоже, вы хотите контролировать дни, переданные в средство выбора даты disabledDates .

Для этого я бы использовал массив дней (0-6) и создал вычисляемое свойство для конфигурации средства выбора даты

 export default {
  data: () => ({ days: [0, 1] }), // or whatever makes sense as a default value
  computed: {
    state: ({ days }) => ({
      disabledDates: { days }
    })
  }
}
  

Вы можете управлять days свойством так, как хотите. Например, с помощью флажков

 <label v-for="(day, index) in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']" :key="index">
  {{ day }}
  <input type="checkbox" v-model="days" :value="index">
</label>