SyntaxError: Assigning to rvalue-CodePudding

I have the following code in tbody

<tr v-for="item in apiResponse.costGroups" :key="item.process_receipt_id">
    <td >
        <el-input type="text" v-model="getCostGroupProp(item, 'process_receipt_date')" />
    </td>
</tr>

in methods object, I have the following code.

methods: {
  getCostGroupProp(costGroup, prop) {
    return costGroup[prop]
  }
}

and I get the following error:

SyntaxError: Assigning to rvalue

However it is working just fine when I write HTML code like this.

<tr v-for="item in apiResponse.costGroups" :key="item.process_receipt_id">
    <td >
        <el-input type="text" v-model="item.process_receipt_date" />
    </td>
</tr>

I have read in one of the questions on StackOverflow that the problem is we cannot have a number in the v-model. But, I don't have a number in the v-model & the code is also working fine with the second approach and with the same set of properties so I don't understand why.

Can anyone help me understand why it is so? I appreciate it. Thanks!

CodePudding user response：

Do not assign v-model to a method. v-model is two way binding. Use a data property or computed property (with set/get methods).