[Vue 警告]：无法生成渲染函数：SyntaxError: missing ) after argument list答案

【问题标题】：[Vue warn]: Failed to generate render function: SyntaxError: missing ) after argument list[Vue 警告]：无法生成渲染函数：SyntaxError: missing ) after argument list
【发布时间】：2019-04-17 09:27:35
【问题描述】：

我遇到了一个非常奇怪的行为，Vue 抱怨缺少 )，但实际上没有缺少 )。更奇怪的是，如果我不使用 filterOptions 对象而是创建一个简单的属性，那么它就可以工作。由于某种原因，它无法将其作为对象的属性来处理。

[Vue 警告]：无法生成渲染函数：SyntaxError: missing) 在参数列表之后

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

但是如果我把它改成这个（没有 filterOptions 对象）那么它就可以工作

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

这是我的 date_format 函数和数据。

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

【问题讨论】：

函数调用方式有误。这可能是拼写错误、缺少运算符或未转义的字符串。您的 filterOptions.date_start 值可能错误地转义字符

标签： javascript vue.js

【解决方案1】：

要将从另一个属性派生的属性用作 v-model，您应该使用 计算属性 而不是方法。计算属性有两个显式方法，get 和 set。

在 getter 中，您可以获取 YYYY-MM-DD 格式的 startdate 并将其转换为 DD.MM.YYYY 并返回，在 setter 中您可以获取 DD.MM.YYYY 并将其转换为 YYYY-MM- DD 并将其设置为 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")
          : ""
      }
    }
  }
});

【讨论】：

谢谢，我不知道你不能在 v-model 中使用派生属性。不过这似乎有点奇怪。
你可以使用派生属性，但是方法是单向的，你只能返回值，所以如果你在模板中使用字符串插值就可以了，但是当你需要两个方式数据绑定（如 v-model）你必须有一个 getter 和 setter，这是使用计算属性的地方。

【解决方案2】：

我同意楼上的回答，还有一种很笨的办法，就是直接把filterOptions对象传入方法中。

【讨论】：