Posso passar parâmetros nas propriedades calculadas no Vue.Js

é possível passar parâmetro nas propriedades calculadas no Vue.Js. Eu posso ver quando tendo getters / setter usando computados, eles podem pegar um parâmetro e atribuí-lo a uma variável. como aqui da documentação :

// ...
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]
    }
  }
}
// ...

Isso também é possível:

// ...
computed: {
  fullName: function (salut) {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}
// ...

Onde a propriedade computada pega um argumento e retorna a saída desejada. No entanto, quando tento isso, estou recebendo este erro:

vue.common.js: 2250 TypeError não capturado: fullName não é uma função (…)

Devo usar métodos para esses casos?

Provavelmente você deseja usar um método

<span>{{ fullName('Hi') }}</span>

methods: {
  fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`
  }
}

Explicação mais longa

Tecnicamente, você pode usar uma propriedade computada com um parâmetro como este:

computed: {
   fullName() {
      return salut => `${salut} ${this.firstName} ${this.lastName}`
   }
}

(Obrigado Unirgypelo código base para isso.)

A diferença entre uma propriedade calculada e um método é que as propriedades calculadas são armazenadas em cache e mudam apenas quando suas dependências mudam. Um método avaliará toda vez que for chamado .

Se você precisar de parâmetros, geralmente não há benefícios em usar uma função de propriedade computada sobre um método nesse caso. Embora ele permita que você tenha a função getter parametrizada vinculada à instância do Vue, você perde o cache, portanto não há realmente nenhum ganho lá; na verdade, você pode interromper a reatividade (AFAIU). Você pode ler mais sobre isso na documentação do Vue https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

A única situação útil é quando você precisa usar um getter e precisa parametrizá-lo. Essa situação ocorre, por exemplo, no Vuex . no Vuex, é a única maneira de obter resultados parametrizados de forma síncrona da loja (as ações são assíncronas). Portanto, essa abordagem é listada na documentação oficial da Vuex para seus getters https://vuex.vuejs.org/guide/getters.html#method-style-access

Você pode usar métodos, mas eu prefiro ainda usar propriedades computadas em vez de métodos, se eles não estiverem alterando dados ou não tiverem efeitos externos.

Você pode passar argumentos para propriedades computadas dessa maneira (não documentada, mas sugerida pelos mantenedores, não se lembra onde):

computed: {
   fullName: function () {
      var vm = this;
      return function (salut) {
          return salut + ' ' + vm.firstName + ' ' + vm.lastName;  
      };
   }
}

EDIT: Por favor, não use esta solução, ela apenas complica o código sem nenhum benefício.

Bem, tecnicamente falando, podemos passar um parâmetro para uma função computada, da mesma forma que podemos passar um parâmetro para uma função getter no vuex. Essa função é uma função que retorna uma função.

Por exemplo, nos getters de uma loja:

{
  itemById: function(state) {
    return (id) => state.itemPool[id];
  }
}

Esse getter pode ser mapeado para as funções computadas de um componente:

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ])
}

E podemos usar essa função computada em nosso modelo da seguinte maneira:

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>

Podemos aplicar a mesma abordagem para criar um método calculado que aceita um parâmetro.

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ]),
  descriptionById: function() {
    return (id) => this.itemById(id).description;
  }
}

E use-o em nosso modelo:

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>

Dito isto, não estou dizendo aqui que é a maneira certa de fazer as coisas com o Vue.

No entanto, pude observar que, quando o item com o ID especificado é modificado na loja, a exibição atualiza seu conteúdo automaticamente com as novas propriedades desse item (a ligação parece estar funcionando perfeitamente).

Filtros são uma funcionalidade fornecida pelos componentes do Vue que permitem aplicar formatação e transformações a qualquer parte dos dados dinâmicos do modelo.

Eles não alteram os dados de um componente nem nada, mas afetam apenas a saída.

Digamos que você esteja imprimindo um nome:

new Vue({
  el: '#container',
  data() {
    return {
      name: 'Maria',
      lastname: 'Silva'
    }
  },
  filters: {
    prepend: (name, lastname, prefix) => {
      return `${prefix} ${name} ${lastname}`
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container">
  <p>{{ name, lastname | prepend('Hello') }}!</p>
</div>

Observe a sintaxe para aplicar um filtro, que é | filterName. Se você conhece o Unix, esse é o operador de canal Unix, usado para passar a saída de uma operação como entrada para a próxima.

A propriedade de filtros do componente é um objeto. Um único filtro é uma função que aceita um valor e retorna outro valor.

O valor retornado é o que realmente é impresso no modelo Vue.js.

Você também pode passar argumentos para getters retornando uma função. Isso é particularmente útil quando você deseja consultar uma matriz na loja:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Observe que os getters acessados ​​por métodos serão executados toda vez que você os chamar, e o resultado não será armazenado em cache.

Isso é chamado de Método-Style acesso e está documentado nos docs Vue.js .

Você pode passar parâmetros, mas não é o caminho do vue.js ou está errado.

No entanto, há casos em que você precisa fazer isso. Vou mostrar um exemplo simples de passagem de valor para a propriedade computada usando getter e setter.

<template>
    <div>
        Your name is {{get_name}} <!-- John Doe at the beginning -->
        <button @click="name = 'Roland'">Change it</button>
    </div>
</template>

E o roteiro

export default {
    data: () => ({
        name: 'John Doe'
    }),
    computed:{
        get_name: {
            get () {
                return this.name
            },
            set (new_name) {
                this.name = new_name
            }
        },
    }    
}

Quando o botão clicou, estamos passando para a propriedade computada o nome 'Roland' e em set() alterando o nome de 'John Doe' para 'Roland'.

Abaixo, há um caso de uso comum quando calculado é usado com getter e setter. Digamos que você tenha a seguinte loja vuex:

export default new Vuex.Store({
  state: {
    name: 'John Doe'
  },
  getters: {
    get_name: state => state.name
  },
  mutations: {
    set_name: (state, payload) => state.name = payload
  },
})

E no seu componente você deseja adicionar v-modela uma entrada, mas usando a loja vuex.

<template>
    <div>
        <input type="text" v-model="get_name">
        {{get_name}}
    </div>
</template>
<script>
export default {
    computed:{
        get_name: {
            get () {
                return this.$store.getters.get_name
            },
            set (new_name) {
                this.$store.commit('set_name', new_name)
            }
        },
    }    
}
</script>

Não tenho certeza do que você está tentando alcançar, mas parece que você ficará perfeitamente bem usando o método, em vez de computado!

computed: {
  fullName: (app)=> (salut)=> {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}

quando você quer usar

<p>{{fullName('your salut')}}</p>

Computado pode ser considerado tem uma função. Portanto, para um exemplo de validação, você poderia claramente fazer algo como:

    methods: {
        validation(attr){
            switch(attr) {
                case 'email':
                    const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
                    return re.test(this.form.email);
                case 'password':
                    return this.form.password.length > 4
            }
        },
        ...
    }

Que você usará como:

  <b-form-input
            id="email"
            v-model="form.email"
            type="email"
            :state="validation('email')"
            required
            placeholder="Enter email"
    ></b-form-input>

Lembre-se de que você ainda perderá o cache específico do computado.

Sim, existem métodos para usar parâmetros. Como as respostas acima, no seu exemplo, é melhor usar métodos, pois a execução é muito leve.

Apenas para referência, em uma situação em que o método é complexo e o custo é alto, você pode armazenar em cache os resultados da seguinte forma:

data() {
    return {
        fullNameCache:{}
    };
}

methods: {
    fullName(salut) {
        if (!this.fullNameCache[salut]) {
            this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
        }
        return this.fullNameCache[salut];
    }
}

nota: ao usar isso, observe a memória se estiver lidando com milhares