Возможно ли передать параметр в вычисляемых свойствах в Vue.Js. Я вижу, что, используя getters / setter с помощью computed, они могут взять параметр и присвоить его переменной. как здесь из документации :
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ...
Это также возможно:
// ...
computed: {
fullName: function (salut) {
return salut + ' ' + this.firstName + ' ' + this.lastName
}
}
// ...
Где свойство computed принимает аргумент и возвращает желаемый результат. Однако, когда я пытаюсь это сделать, я получаю эту ошибку:
vue.common.js: 2250 Uncaught TypeError: fullName не является функцией (…)
Должен ли я использовать методы для таких случаев?
javascript
vue.js
vuejs2
Саурабх
источник
источник
Ответы:
Скорее всего, вы хотите использовать метод
Более длинное объяснение
Технически вы можете использовать вычисляемое свойство с таким параметром:
(Спасибо
Unirgy
за базовый код для этого.)Разница между вычисляемым свойством и методом заключается в том, что вычисляемые свойства кэшируются и изменяются только при изменении их зависимостей. Метод будет оценивать каждый раз , когда это называется .
Если вам нужны параметры, то в таком случае обычно нет преимуществ использования вычисляемой функции свойства по сравнению с методом. Хотя это позволяет вам связать параметризованную функцию-получатель с экземпляром Vue, вы теряете кеширование, поэтому не получаете никакого усиления, фактически вы можете нарушить реактивность (AFAIU). Вы можете прочитать больше об этом в документации Vue https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
Единственная полезная ситуация - когда вам нужно использовать геттер и нужно его параметризовать. Такая ситуация происходит, например, в Vuex . в Vuex это единственный способ синхронно получить параметризованный результат из хранилища (действия асинхронные). Таким образом, этот подход указан в официальной документации Vuex для его получателей https://vuex.vuejs.org/guide/getters.html#method-style-access
источник
<span v-text="fullName('Hi')"></span>
вместо этого также работает.<span :text="message"></span>
, что больше не работает с Vue 2.0, вместо этого нужно использовать:<span v-text="message"></span>
или<span>{{ message }}</span>
как показано в этом коде: codepen.io/Ismael-VC/pen/dzGzJaВы можете использовать методы, но я предпочитаю по-прежнему использовать вычисляемые свойства вместо методов, если они не изменяют данные или не имеют внешних эффектов.
Вы можете передать аргументы вычисляемым свойствам следующим образом (не задокументировано, но предложено сопровождающими, не помню где):
РЕДАКТИРОВАТЬ: Пожалуйста, не используйте это решение, оно только усложняет код без каких-либо преимуществ.
источник
Ну, технически говоря, мы можем передать параметр в вычисляемую функцию, точно так же, как мы можем передать параметр в функцию-получатель в vuex. Такая функция является функцией, которая возвращает функцию.
Например, в получателях магазина:
Этот метод получения может быть сопоставлен с вычисляемыми функциями компонента:
И мы можем использовать эту вычисляемую функцию в нашем шаблоне следующим образом:
Мы можем применить тот же подход для создания вычисляемого метода, который принимает параметр.
И используйте это в нашем шаблоне:
При этом, я не говорю здесь, что это правильный способ делать вещи с Vue.
Тем не менее, я мог заметить, что когда элемент с указанным идентификатором видоизменяется в хранилище, представление автоматически обновляет его содержимое с новыми свойствами этого элемента (привязка, кажется, работает просто отлично).
источник
Фильтры - это функциональность, предоставляемая компонентами Vue, которая позволяет применять форматирование и преобразования к любой части динамических данных шаблона.
Они не изменяют данные компонента или что-либо еще, но влияют только на вывод.
Скажем, вы печатаете имя:
Обратите внимание на синтаксис для применения фильтра, который является | FILTERNAME. Если вы знакомы с Unix, это оператор канала Unix, который используется для передачи вывода операции в качестве ввода следующей.
Свойство filters компонента является объектом. Один фильтр - это функция, которая принимает значение и возвращает другое значение.
Возвращаемое значение - это то, которое фактически напечатано в шаблоне Vue.js.
источник
Вы также можете передавать аргументы получателям, возвращая функцию. Это особенно полезно, когда вы хотите запросить массив в магазине:
Обратите внимание, что геттеры, к которым получают доступ через методы, будут запускаться каждый раз, когда вы их вызываете, и результат не кэшируется.
Это называется метод-Style доступ и документировано на документах Vue.js .
источник
Однако есть случаи, когда вам нужно это сделать. Я собираюсь показать вам простой пример передачи значения в вычисляемое свойство с использованием getter и setter.
И сценарий
Когда кнопка нажата, мы передаем вычисляемому свойству имя «Роланд» и
set()
изменяем имя с «Джон Доу» на «Роланд».Ниже приведен наиболее распространенный случай использования computed с getter и setter. Скажем, у вас есть следующий магазин Vuex:
И в вашем компоненте вы хотите добавить
v-model
к входу, но с помощью магазина Vuex.источник
Я не совсем уверен, чего вы пытаетесь достичь, но похоже, что вы будете прекрасно использовать метод вместо вычислений!
источник
когда вы хотите использовать
источник
Вычисляемый можно считать имеет функцию. Таким образом, для примера на valdiation вы можете сделать что-то вроде:
Что вы будете использовать, как:
Просто имейте в виду, что вы все равно пропустите кэширование, специфичное для computed.
источник
Да, существуют методы для использования params. Как и ответы, приведенные выше, в вашем примере лучше использовать методы, так как выполнение очень легкое.
Только для справки, в ситуации, когда метод сложен и стоимость высока, вы можете кэшировать результаты следующим образом:
примечание: при использовании этого, следите за памятью, если имеете дело с тысячами
источник