[Vue warn]: Failed to generate render function: SyntaxError: missing ) after argument list


#1

I came across a very strange behavior where Vue is complaining about a missing ) but in reality there is no missing ). What makes it even stranger is that if I do not use the filterOptions object but make a simple property then it works. For some reason it can’t handle it being a property of an object.

[Vue warn]: Failed to generate render function: SyntaxError: missing ) after argument list

<input
    v-model="date_format(filterOptions.date_start)"
/>

But if I change it to this (without filterOptions object) then it works

<input
    v-model="date_format(startdate)"
/>

Here’s my date_format function and data.

methods:
{
    date_format(date)
    {
        return (date != null && date != '') ?
        moment(date, 'YYYY-MM-DD').format("DD.MM.YYYY") : ''
    },
},

data()
{
    return {
        total: 10,
        startdate: '',
        filterOptions: {
            perPage: 10,
            orderBy: 'end_date',
            orderDirection: 'desc',
            date_start: '',
            end_date_end: '',
        },
    }
},

#2

The reason is that you simply can’t wrape the porpoerty that you are accessing with v-model in a function like that, but I’ll admit the error message is very misleading.

When Vue turns the v-model into Javascript, it basically takes the attribute value and uses it in two snippets of code:

  1. for getting the value: this[startdate]
  2. for setting the valze: this[startdate] = ....

Now, since you wrapped it in a function, that would turn into:

  1. for getting the value: this[date_format(filterOptions.date_start)]
  2. for setting the valze: this[date_format(filterOptions.date_start] = ....

which I hope is obvious that it won’t work - there are no matching data properties on the component.

So for this reason, syntax like this is not allowed, and as an indirect consequence, the code generator gets tripped up by the parenthesis when trypingt to convert the template into javascript.