Блог

Главная - Вопросы по программированию - Почему мои реквизиты не привязываются динамически?

Почему мои реквизиты не привязываются динамически?

#vue.js

#vue.js

Вопрос:

У меня есть следующий компонент, который я создал, который является флажком типов:

 <mapFilterCheckbox v-bind:selected="allSelected" v-bind:label="getCleanedTitle(category.name)" v-bind:count="category.count" v-on:click.native="filterPostsByCategory(category.slug)"/>

Я указал prop of selected , который динамически привязан к переменной this.allSelected . У меня также есть другая кнопка в другом месте моего шаблона, которая устанавливает переменную this.allSelected в значение false при нажатии.

Однако это изменение не передается дочернему компоненту в качестве реквизита — и я абсолютно не уверен, почему. Это mapFilterCheckbox компонент:

 <template>
  <div>
    <div class="vue-taxonomy-select clearfix" v-bind:class="{ 'vue-taxonomy-select__active': checked }" v-on:click="checkBoxClick()">

      <div class="float-left">
        <font-awesome-icon :icon="icon" class="mr-3"/>
        <span class="text-dark" v-html="label"></span>
      </div>

      <div class="float-right">
        <small class="font-weight-bold text-teal">{{ count }}</small>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'mapFilterCheckbox',
  props: {
    label: String,
    count: [String, Number],
    selected: Boolean,
  },
  data () {
    return {
      checked: this.selected,
      icon: this.selected ? ['fal', 'check-square'] : ['fal', 'square']
    }
  },
  watch: {
    selected () {
      console.log(this.selected)
    },
    checked () {
      if (this.checked) {
        this.icon = ['fal', 'check-square']
      }

      if (!this.checked) {
        this.icon = ['fal', 'square']
      }
    }
  },
  methods: {
    checkBoxClick () {
      this.checked = !this.checked
    }
  }
}
</script>

Наблюдатель за выбранным не регистрирует изменение выбранного значения … изменение значения allSelected также не изменяет ни this.checked, ни icon…so для меня prop selected родительский компонент не изменяет?

Это работает только тогда, когда я изначально установил allSelected в объекте данных родительского компонента значение true или false, все работает так, как ожидалось.

Итак, каким образом мне зарегистрировать эту мутацию в дочернем компоненте??

**** ОБНОВИТЬ **** Ок — итак, значение, allSelected однажды установленное при нажатии на resetAllFilters , равно false — поэтому оно никогда не обновляется после первоначального нажатия …как мне распространить изменение, даже если я возвращаю его к false исходному false ??

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

1. Я бы подумал, что использование вычисляемого свойства было бы правильным решением…

2. @iceman — Я пробовал это, и это не работает; кажется, работает — я попытался вычислить this.checked в дочернем элементе mapFilterCheckbox значение передаваемого реквизита this.selected , но затем я устанавливаю его внутри метода checkBoxClick, поэтому, к сожалению, я не могу использовать этот метод … ошибки установки возвращаются с проблемой максимального стека вызовов.

3. @iceman если бы вы могли привести пример, который сработал бы — и поверьте мне, я перепробовал все, что мог придумать, с помощью вычисляемого метода get set, тогда я был бы очень признателен.

4. @Iceman Мне кажется, что когда я изначально запускаю метод события щелчка resetAllFilters — allSelected устанавливается с true на false. Любой последующий щелчок, и это всегда false, поэтому не регистрируется изменение. Не могу ли я явно указать Vue изменить переменную?

Ответ №1:

Измените свой наблюдатель на вычисляемый реквизит, подобный этому:

 computed: {
  icon() {
    return this.checked ? ['fal', 'check-square'] : ['fal', 'square']
  }
}

Итак, переменная icon теперь реагирует на любое обновление в checked.