Vue中基于Ajax初始化复选框值及处理更新时的计算属性报错问题

你遇到的[Vue warn]: Computed property "checked" was assigned to but it has no setter.错误，核心原因是你把checked定义成了只有getter的计算属性，但复选框通过v-model绑定它时，会尝试给它赋值（用户点击勾选/取消时），而计算属性默认没有setter，所以Vue报错了。另外你的代码还有个小问题：计算属性里调用initialize()（模拟Ajax）会导致这个方法被频繁执行，因为计算属性会在依赖变化时重新计算，这显然不是Ajax请求该放的地方。

下面给你两种可行的修正方案，先从更适合新手的data + watch方案说起：

方案一：使用data属性存储状态 + watch监听变化 #

这种方式逻辑更直观，适合刚接触Vue的开发者：

var vm = new Vue({
  el: '#root',
  data() {
    return {
      // 先初始化一个默认值，后续会被Ajax请求返回的值覆盖
      checked: false
    }
  },
  mounted() {
    // 页面渲染完成后，发起Ajax请求获取初始状态
    this.initialize()
  },
  watch: {
    // 监听checked的变化，用户操作复选框时自动触发更新
    checked(newVal) {
      this.update(newVal)
    }
  },
  methods: {
    initialize() {
      // 模拟Ajax请求获取初始值
      var randomBoolean = Math.random() >= 0.5;
      alert('Ajax request here to initialize it as ' + (randomBoolean ? 'checked' : 'unchecked'));
      // 将获取到的状态赋值给data里的checked，同步到复选框
      this.checked = randomBoolean;
    },
    update(newVal) {
      alert('ajax request here to set it to ' + newVal)
      // 这里写实际的后端更新逻辑，把newVal传给服务器
    }
  }
});

关键修改点： #

• 把checked从计算属性移到data中，因为它是需要被修改的可变状态，不是基于其他值计算出来的。
• 把初始化的Ajax请求放到mounted钩子中，这是Vue推荐的页面渲染完成后执行异步操作的时机，避免计算属性重复触发请求。
• 用watch监听checked的变化，用户操作复选框时自动触发更新请求。

方案二：使用带setter的计算属性（进阶方式） #

如果你更倾向于用计算属性实现，也可以给它添加setter，让它支持赋值操作：

var vm = new Vue({
  el: '#root',
  data() {
    return {
      _checked: false // 用内部变量存储实际的勾选状态
    }
  },
  mounted() {
    this.initialize()
  },
  computed: {
    checked: {
      // getter：返回当前的勾选状态
      get() {
        return this._checked
      },
      // setter：当v-model尝试给checked赋值时触发
      set(newVal) {
        this._checked = newVal
        // 赋值后立即触发后端更新请求
        this.update(newVal)
      }
    }
  },
  methods: {
    initialize() {
      var randomBoolean = Math.random() >= 0.5;
      alert('Ajax request here to initialize it as ' + (randomBoolean ? 'checked' : 'unchecked'));
      this._checked = randomBoolean;
    },
    update(newVal) {
      alert('ajax request here to set it to ' + newVal)
    }
  }
});

这种方式的逻辑： #

• 用_checked这个data变量存储真实的勾选状态，计算属性checked只是一层对外的包装。
• 用户操作复选框时，v-model会调用checked的setter，我们在setter里更新内部的_checked，同时触发更新请求。
• 初始化时直接修改_checked的值，会自动同步到计算属性的getter，更新复选框的显示状态。

两种方案都能解决你的问题，方案一更简单易懂，推荐新手优先使用。

内容的提问来源于stack exchange，提问作者TJ is too short