Vue中未调用的计算属性集 [英] computed property set not called in Vue

问题描述

根据文档，只要我定义了get/set方法，我就应该能够在Vue中将计算属性用作 v-model ，但是在我看来，这是行不通的:

According to the documentation I should be able to use computed properties as v-model in Vue as long as I define get/set methods, but in my case it doesn't work:

export default{

    template: `
      <form class="add-upload" @submit.prevent="return false">
        <label><input type="checkbox" v-model="options.test" /> test </label>
      </form>
    `,

    computed: {

      options: {

        get(){
          console.log('get');
          return {test: false};
        },

        set(value){
          console.log('set');
        },

      },

    }

}

当我检查/取消选中输入时，显然不会调用

set .但是在显示组件时会调用 get ...

Apparently set is not called when I check/uncheck the input. But get is called when the component is displayed...

推荐答案

编辑:在阅读了您依赖于本地存储的注释后，我只能建议您使用Vuex( https://www.npmjs.com/package/vuex-persist )这样，您的本地存储将始终链接到您的应用程序，而不必每次都弄乱getItem/setItem.

Edit: After reading in the comments that you rely on the localstorage, I can only suggest you to take the Vuex approach and use a persistence library to handle the localstorage. (https://www.npmjs.com/package/vuex-persist) This way, your localstorage will always be linked to your app and you don't have to mess with getItem/setItem everytime.

看看您的方法，我认为您有理由在数据属性上使用计算属性.

Looking at your approach, I assume you have your reasons to use a computed property over a data property.

发生问题是因为您的计算属性返回了一个在 get 处理程序中无处定义的对象.无论您尝试什么，都将无法在 set 处理程序中操作该对象.

The problem happens because your computed property returns an object defined nowhere but in the get handler. Whatever you try, you won't be able to manipulate that object in the set handler.

get 和 set 必须链接到公共参考.正如许多建议所建议的那样，它是数据属性，还是应用程序中的真相来源(Vuex实例是一个很好的例子).

The get and set must be linked to a common reference. A data property, as many suggested, or a source of truth in your app (a Vuex instance is a very good example).

这样，您的 v-model 可以与您计算的属性的 set 处理程序完美配合.

this way, your v-model will work flawlessly with the set handler of your computed property.

这是一个正在工作的小提琴，它解释了这一点:

Here's a working fiddle demonstrating the explanation:

使用Vuex

const store = new Vuex.Store({
  state: {
    // your options object is predefined in the store so Vue knows about its structure already
    options: {
      isChecked: false
    }
  },
  mutations: {
    // the mutation handler assigning the new value
    setIsCheck(state, payload) {
      state.options.isChecked = payload;
    }
  }
});

new Vue({
  store: store,
  el: "#app",
  computed: {
    options: {
      get() {
        // Here we return the options object as depicted in your snippet
        return this.$store.state.options;
      },
      set(checked) {
        // Here we use the checked property returned by the input and we commit a Vuex mutation which will mutate the state
        this.$store.commit("setIsCheck", checked);
      }
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

<div id="app">
  <h2>isChecked: {{ options.isChecked }}</h2>
  <input type="checkbox" v-model="options.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex@2.0.0"></script>

具有数据属性

new Vue({
  el: "#app",
  data: {
    options: {
      isChecked: false
    }
  },
  computed: {
    computedOptions: {
      get() {
        return this.options;
      },
      set(checked) {
        this.options.isChecked = checked;
      }
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

<div id="app">
  <h2>isChecked: {{ computedOptions.isChecked }}</h2>
  <input type="checkbox" v-model="computedOptions.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

您的方法有点特殊，恕我直言，但是同样，您必须有理由这样做.

Your approach is a bit special IMHO but, again, you must have your reasons to do so.

这篇关于Vue中未调用的计算属性集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！