Search code examples
typescriptvue.jsvuejs2vue-class-components

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


I wanna use v-model for vuedraggable plugin with vuex, but i don't know how set computed property like below not in @Component decorator. Have another solutions for that?

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>

Solution

  • You would do it this way:

    <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>
    

    Please remember that you'll need to tailor the code above to fit your specific application.