javascript - [Vue 警告]:无法生成渲染函数:SyntaxError: missing ) after argument list
问题描述
我遇到了一个非常奇怪的行为,Vue 抱怨缺少 ) 但实际上没有缺少 )。更奇怪的是,如果我不使用 filterOptions 对象而是创建一个简单的属性,那么它就可以工作。由于某种原因,它无法将其作为对象的属性来处理。
[Vue 警告]:无法生成渲染函数:SyntaxError: missing ) after argument list
<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: '',
},
}
},
解决方案
要将从另一个属性派生的属性用作 v-model,您应该使用计算属性而不是方法。计算属性有两个显式方法,get 和 set。
在 getter 中,您可以获得 YYYY-MM-DD 格式的 startdate 并将其转换为 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")
: ""
}
}
}
});
推荐阅读
- google-sheets - How to Use formula to insert Month to Date Automatically
- python - Iterate through multiple lists to apply the same changes to each
- php - Mariadb maxscale + php PDO geting numeric as strings
- java - 安装 Veracode Greenlight 插件后 IntelliJ 崩溃
- arrays - 在范围内看不到数组我不确定为什么 SwiftUI
- python - pandas 结合了两个值
- css - 在 React 中使用 CSS 进行样式设置
- typescript - 打字稿:从另一种类型的可选属性中构造具有所需属性的新类型
- field - Word 公式字段在标题中未正确显示
- python - 如何一次对字典或列表中的所有嵌套字典和列表进行排序?