如何在 vue-class 中为 v-model 使用计算属性？

Question

我想将 v-model 用于 vuex 的 vuedraggable 插件，但我不知道如何设置计算属性如下所示，而不是在 @Component 装饰器中。还有其他解决方案吗？

computed: {
  myList: {
    get() {
      return this.$store.state.Goal.goalData.steps
    },
    set(value) {
      this.$store.dispatch('sortList', {id: this.$store.state.Goal.goalId, list:value})
    }
  }
}

<draggable v-model='myList'></draggable>

Answer 1

你会这样做：

<template>
  <div>
    <input v-model="computedMsg">
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {

  // computed
  get computedMsg () {
    return state.val
  }

  set computedMsg (val) {
    return store.commit("changeVal", val)
  }
}
</script>

请记住，您需要修改上面的代码以适合您的特定应用程序。

如何在 vue-class 中为 v-model 使用计算属性？

How to use computed properties in vue-class for v-model?

typescript

vue.js

vuejs2

vue-class-components