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

Question

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: '',
        },
    }
},

There is an error with how the function is called. This might be a typo, a missing operator, or an unescaped string. your filterOptions.date_start value could be escaping characters wrongly — FirstIndex
– FirstIndex, Commented Apr 17, 2019 at 10:00

Shuvojit · Accepted Answer · 2019-04-17 10:08:53Z

2

To use a property that is derived from another property as a v-model, you should use computed properties instead of methods. Computed properties have two explicit methods, get and set.

In the getter you can get the YYYY-MM-DD formatted startdate and convert it into DD.MM.YYYY and return, and in the setter you can take a DD.MM.YYYY and convert it into YYYY-MM-DD and set it into startdate.

<div id="app">
  <p>{{ message }}</p>
  <input v-model="formatted">
  {{ startdate }}
</div>

new Vue({
  el: "#app",
  data: {
    message: "Hello Vue.js!",
    total: 10,
    startdate: "2017-02-15",
    filterOptions: {
      perPage: 10,
      orderBy: "end_date",
      orderDirection: "desc",
      date_start: "",
      end_date_end: ""
    }
  },
  computed: {
    formatted: {
      get: function() {
        return this.startdate != null && this.startdate != ""
          ? moment(this.startdate, "YYYY-MM-DD").format("DD.MM.YYYY")
          : "";
      },
      set: function(newValue) {
        this.startdate = newValue != null && newValue != ""
          ? moment(newValue, "DD.MM.YYYY").format("YYYY-MM-DD")
          : ""
      }
    }
  }
});

answered Apr 17, 2019 at 10:08

Shuvojit

1,4709 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Liga Over a year ago

Thanks, I didn't know you can't use a derived property in v-model. That seems a bit strange though.

Shuvojit Over a year ago

You can use a derived property, but a method is a one way street, you can only return value, so if you're using string interpolation in the templates it's fine, but when you need a two way data binding(like v-model) you have to have a getter and setter, which is where computed properties comes in use.

LFR502 · Accepted Answer · 2019-04-17 10:12:08Z

0

I agree with the above answer, and there is a very stupid way to directly pass the filterOptions object into the method.

answered Apr 17, 2019 at 10:12

LFR502

564 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related