Solución:
Lo más probable es que desee utilizar un método
<span>{{ fullName('Hi') }}</span>
methods: {
fullName(salut) {
return `${salut} ${this.firstName} ${this.lastName}`
}
}
Explicación más larga
Técnicamente, puede usar una propiedad calculada con un parámetro como este:
computed: {
fullName() {
return salut => `${salut} ${this.firstName} ${this.lastName}`
}
}
(Gracias Unirgy para el código base para esto.)
La diferencia entre una propiedad calculada y un método es que las propiedades calculadas se almacenan en caché y cambian solo cuando cambian sus dependencias. A El método evaluará cada vez que se llame.
Si necesita parámetros, generalmente no hay beneficios de usar una función de propiedad calculada sobre un método en tal caso. Aunque le permite tener una función getter parametrizada vinculada a la instancia de Vue, pierde el almacenamiento en caché, por lo que en realidad no hay ganancia allí, de hecho, puede romper la reactividad (AFAIU). Puede leer más sobre esto en la documentación de Vue https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
La única situación útil es cuando tengo que use un getter y necesite tenerlo parametrizado. Por ejemplo, esta situación ocurre en Vuex. En Vuex, es la única forma de obtener resultados parametrizados de forma sincrónica desde la tienda (las acciones son asíncronas). Por lo tanto, este enfoque está incluido en la documentación oficial de Vuex para sus captadores https://vuex.vuejs.org/guide/getters.html#method-style-access
Puede utilizar métodos, pero yo prefiero seguir utilizando propiedades calculadas en lugar de métodos, si no son datos mutantes o no tienen efectos externos.
Puede pasar argumentos a las propiedades calculadas de esta manera (no documentado, pero sugerido por los encargados del mantenimiento, no recuerdo dónde):
computed: {
fullName: function () {
var vm = this;
return function (salut) {
return salut + ' ' + vm.firstName + ' ' + vm.lastName;
};
}
}
EDITAR: No use esta solución, solo complica el código sin ningún beneficio.
Bueno, técnicamente hablando, podemos pasar un parámetro a una función calculada, de la misma manera que podemos pasar un parámetro a una función getter en vuex. Tal función es una función que devuelve una función.
Por ejemplo, en los captadores de una tienda:
{
itemById: function(state) {
return (id) => state.itemPool[id];
}
}
Este captador se puede asignar a las funciones calculadas de un componente:
computed: {
...mapGetters([
'ids',
'itemById'
])
}
Y podemos usar esta función calculada en nuestra plantilla de la siguiente manera:
<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>
Podemos aplicar el mismo enfoque para crear un método calculado que toma un parámetro.
computed: {
...mapGetters([
'ids',
'itemById'
]),
descriptionById: function() {
return (id) => this.itemById(id).description;
}
}
Y utilícelo en nuestra plantilla:
<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>
Dicho esto, no estoy diciendo aquí que sea la forma correcta de hacer las cosas con Vue.
Sin embargo, pude observar que cuando el elemento con la ID especificada se muta en la tienda, la vista actualiza su contenido automáticamente con las nuevas propiedades de este elemento (el enlace parece estar funcionando bien).