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

Posted 2023-03-13

【中文标题】如何在 vue-class 中为 v-model 使用计算属性？

【英文标题】：How to use computed properties in vue-class for v-model?

【发布时间】：2019-08-26 17:50:11

【问题描述】：

我想将 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>

【参考方案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>

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