#javascript #vue.js
#javascript #vue.js
Вопрос:
Я столкнулся с очень странным поведением, когда Vue жалуется на отсутствие ), но на самом деле пропажи нет ). Что делает это еще более странным, так это то, что если я не использую объект filterOptions, а создаю простое свойство, тогда оно работает. По какой-то причине он не может обработать это свойство объекта.
[Vue warn]: не удалось сгенерировать функцию рендеринга: 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 amp;amp; 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: '',
},
}
},
Комментарии:
1. Возникает ошибка в том, как вызывается функция. Это может быть опечатка, пропущенный оператор или неэкранированная строка. ваше значение filterOptions.date_start может ошибочно экранировать символы
Ответ №1:
Чтобы использовать свойство, производное от другого свойства, в качестве v-модели, вы должны использовать вычисляемые свойства вместо методов. Вычисляемые свойства имеют два явных метода, get и set .
В получателе вы можете получить начальную дату в формате ГГГГ-ММ-ДД и преобразовать ее в ДД.ММ.ГГГГ и вернуть, а в установщике вы можете взять DD.MM.ГГГГ и преобразовать его в ГГГГ-ММ-ДД и установить его в начальную дату.
<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 amp;amp; this.startdate != ""
? moment(this.startdate, "YYYY-MM-DD").format("DD.MM.YYYY")
: "";
},
set: function(newValue) {
this.startdate = newValue != null amp;amp; newValue != ""
? moment(newValue, "DD.MM.YYYY").format("YYYY-MM-DD")
: ""
}
}
}
});
Комментарии:
1. Спасибо, я не знал, что вы не можете использовать производное свойство в v-model. Хотя это кажется немного странным.
2. Вы можете использовать производное свойство, но метод — это улица с односторонним движением, вы можете возвращать только значение, поэтому, если вы используете интерполяцию строк в шаблонах, это нормально, но когда вам нужна двусторонняя привязка данных (например, v-model), у вас должен быть getter и setter,именно здесь используются вычисляемые свойства.
Ответ №2:
Я согласен с приведенным выше ответом, и есть очень глупый способ напрямую передать объект filterOptions в метод.