为什么我的道具没有被动态绑定？答案

【问题标题】：Why are my props not being bound dynamically?为什么我的道具没有被动态绑定？
【发布时间】：2019-04-03 10:30:12
【问题描述】：

我已经构建了以下组件，它是一个类型的复选框：

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

我指定了selected 的prop，它动态绑定到变量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>

selected 的观察者不会注册所选值的更改...值 allSelected 的更改也不会更改 this.checked 或图标...所以对我来说，prop @ 987654329@没有被父组件变异？

只有当我最初将父组件的数据对象中的allSelected设置为真或假时，它才有效，一切都按预期工作。

那么，到底如何才能让这个突变注册到子组件？？

****UPDATE**** 好的 - 所以在单击 resetAllFilters 时设置的 allSelected 的值是错误的 - 所以在初始单击后它永远不会更新...我该怎么做传播更改，即使我将其从 false 设置回 false??

【问题讨论】：

我认为使用计算属性将是要走的路...
@iceman - 我试过了，但没有；似乎有效 - 我已经尝试在 mapFilterCheckbox 子项中计算 this.checked 传入的道具 this.selected 的值，但后来我将它设置在 checkBoxClick 方法中，所以不幸的是我不能使用该方法...设置器错误返回最大调用堆栈问题。
@iceman 如果您可以概述一个可行的示例 - 相信我已经尝试了所有我能想到的计算 get set 方法，那么我将非常感激。
@Iceman 在我看来，当我最初触发 resetAllFilters 单击事件方法时 - allSelected 从 true 设置为 false。任何后续点击，它总是错误的，所以没有注册更改。我可以不明确告诉 Vue 更改变量吗？

标签： vue.js

【解决方案1】：

将您的观察者更改为这样的计算道具：

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

因此，icon 变量现在对 checked 中的任何更新都具有反应性。

【讨论】：