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

时间:2019-04-17 09:27:35

标签: javascript vue.js

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

  

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

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

2 个答案:

答案 0 :(得分:2)

要使用从另一个属性派生的属性作为v模型,应使用计算属性而不是方法。计算属性具有两个显式方法,即get和set。

在getter中,您可以获取格式为YYYY-MM-DD的开始日期并将其转换为DD.MM.YYYY并返回,在setter中,您可以获取DD.MM.YYYY并将其转换为YYYY-MM- DD并将其设置为开始日期。

<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")
          : ""
      }
    }
  }
});

答案 1 :(得分:0)

我同意以上答案,并且有一种非常愚蠢的方式将filterOptions对象直接传递给方法。