Невозможно просмотреть значение в компоненте (даже используя $ set) в VueJS - PullRequest
0 голосов
/ 13 января 2019

У меня есть компонент флажка, который выглядит следующим образом (я опускаю html / styles):

<script>
  export default {
    props: {
      value: {
        required: true,
        type: Boolean
      },

      label: {
        required: false,
        type: String
      },

      disabled: {
        required: false,
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        isChecked: this.value
      }
    },

    methods: {
      onChange() {
        this.$emit('input', this.isChecked)
      },

      onFocus(event) {
        this.isActive = true
        this.$emit('focus', event)
      },

      onBlur(event) {
        this.isActive = false
        this.$emit('blur', event)
      }
    },

    computed: {
      classes() {
        return [
          { 'is-checked':  this.isChecked },
          { 'is-disabled': this.disabled }
        ];
      }
    },

    watch: {
      value: {
        handler: function(value) {
          console.log('value watcher')
          this.isChecked = !!value
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>

В другом компоненте у меня есть список граждан, который представляет собой массив объектов. Поэтому я отрисовываю его, и когда пользователь выполняет какое-либо действие, мне нужно программно установить значение флажка.

Вот как это выглядит:

      deselectSelectedCitizen() {
        let index   = this.foreignCitizensCopy.findIndex(citizen => citizen.id === this.selectedCitizen.id)
        let citizen = _.cloneDeep(this.foreignCitizensCopy.find(citizen => citizen.id === this.selectedCitizen.id))
        citizen.checked = false

        // Here I tried different methods, like
        // let citizen = this.foreignCitizensCopy.find(citizen => citizen.id === this.selectedCitizen.id)
        // this.$set(citizen, 'checked', false)

        // This one is just rough changing of array
        this.foreignCitizensCopy.splice(index, 1)
        this.foreignCitizensCopy.push(citizen)


        // Also tried to use $set both for "citizen" and for the whole array, updating object
        // this.$set(this.foreignCitizensCopy, index, citizen)


        // In any cases the array did changed, but it does not call checkbox's watcher
        console.log(_.cloneDeep(this.foreignCitizensCopy))

        this.selectedCitizen = null
      },

Итак, я попробовал разные методы, и во всех случаях атрибут checked в массиве foreignCitizensCopy изменился, однако наблюдатель в моем компоненте флажка не сработал.

Я подозреваю, что с флажком что-то не так, но не могу понять, что именно

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...