vue的computed函数传参报错

Question

我既要实现computed的传参，又要用computed的getter和setter，这样写运行项目报错，请问该怎么写？

• 代码

<el-input v-model="variableValue('veriable')"></el-input>

computed:{
  myVariable(){
    return this.$store.state.variable;
  },
  variableValue:{
    get(){
      return (key)=>{
        return this._.get(this.myVariable,this.node.attrs[key]);
      }
    },
    set(value){
      return (key)=>{
        this._.set(this.myVariable,this.node.attrs[key],value);
      }

    }
  },
},

报错信息

Failed to compile.  
  
./node\_modules/vue-loader/lib/template-compiler?{"id":"data-v-326d766c","hasScoped":true,"transformToRequire":{"video":\["src","poster"\],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node\_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/CompArea.vue Module build failed: SyntaxError: Assigning to rvalue (1:599) at Parser.pp$4.raise (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:2757:13) at Parser.pp$2.toAssignable (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:1624:12) at Parser.pp$3.parseMaybeAssign (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:1930:47) at Parser.pp$3.parseExpression (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:1896:19) at Parser.pp$1.parseStatement (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:815:45) at Parser.parseStatement (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:6116:31) at Parser.pp$1.parseBlock (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:1112:23) at Parser.pp$3.parseFunctionBody (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:2600:22) at Parser.pp$1.parseFunction (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:1219:8) at Parser.pp$3.parseExprAtom (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:2184:17) at Parser.<anonymous> (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:6003:24) at Parser.parseExprAtom (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:6129:31) at Parser.pp$3.parseExprSubscripts (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:2047:19) at Parser.pp$3.parseMaybeUnary (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:2024:17) at Parser.pp$3.parseExprOps (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:1966:19) at Parser.pp$3.parseMaybeConditional (E:\\Git\\form-design\\node\_modules\\vue-template-es2015-compiler\\buble.js:1949:19) @ ./src/components/CompArea.vue 11:0-364 @ ./node\_modules/babel-loader/lib!./node\_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/DesignPanel.vue @ ./src/components/DesignPanel.vue @ ./node\_modules/babel-loader/lib!./node\_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/UI.vue @ ./src/components/UI.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js

Answer 1

现在只能这么写了

<template>
  <div>
    <el-input :value="value('a')" @input="setValue($event,'a')"></el-input>
    variable.a:{{variable.a}}
    variable.b:{{variable.b}}
  </div>
</template>
<script>
  export default{
    data(){
      return{
        variable:{
          a:'1',
          b:'2'
        }
      }
    },
    computed:{
      value(){
        return (key)=>{
          return this.variable[key];
        }
      }
    },
    methods:{
      setValue(value,key){
        this.variable[key]=value;
      }
    }
  }
</script>

Answer 2

computed本质上不是函数，无法传参，set的参数是它本身，无法修改；
想传参数就不要折腾computed了，methods中写个方法，用@input传参吧。

Answer 3

<el-input v-model="variableValue"></el-input>

解开 v-model 的语法糖

<el-input :value="variableValue" @input="variableValue = $event.value"></el-input>

Answer 4

<el-input v-model="variableValue"></el-input>

computed: {
    variableValue: {
      get() {
        return this.$store.state.variable
      },
      set(v) {
        this.$store.commit('SET_VARIABLE', v)
      }
    }
}