Могу ли я передавать параметры в вычисленных свойствах в Vue.Js

возможно ли передать параметр в вычисленных свойствах в Vue.Js. Я вижу, когда с помощью вычислений getters / setter они могут принимать параметр и назначать его переменной. как здесь из документации :

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

Где вычисленное свойство принимает аргумент и возвращает желаемый результат. Однако, когда я пытаюсь это сделать, я получаю эту ошибку:

vue.common.js: 2250 Uncaught TypeError: fullName не является функцией (a € |)

Должен ли я использовать методы для таких случаев?

javascript,vue.js,vuejs2,

66

Ответов: 6


81 принят

Вы должны использовать методы:

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

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

PS Разница между вычисленным свойством и методом заключается в том, что вычисленные свойства кэшируются и изменяются только при изменении их зависимостей - поэтому вы не можете передавать там параметры. Методы оцениваются каждый раз, когда вы их вызываете.


Вы можете использовать методы, но я предпочитаю использовать вычисляемые свойства вместо методов, если они не мутируют данные или не имеют внешних эффектов.

Вы можете передать аргументы в вычисленные свойства таким образом (не документированные, но предлагаемые сопровождающими, не помнят где):

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

EDIT: Пожалуйста, не используйте это решение, это только усложняет код без каких-либо преимуществ.


Ну, с технической точки зрения, мы можем передать параметр вычисляемой функции, так же, как мы можем передать параметр функции getter в vuex. Такая функция является функцией, которая возвращает функцию.

Например, в геттерах магазина:

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

Этот геттер может быть сопоставлен с вычисленными функциями компонента:

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

И мы можем использовать эту вычислительную функцию в нашем шаблоне следующим образом:

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

Мы можем применить тот же подход для создания вычисленного метода, который принимает параметр.

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

И используйте его в нашем шаблоне:

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

Говоря это, я не говорю здесь, что это правильный способ делать вещи с Vue.

Тем не менее, я мог заметить, что когда элемент с указанным ID мутируется в хранилище, представление автоматически обновляет его содержимое новыми свойствами этого элемента (привязка, кажется, работает очень хорошо).


0

Да, есть методы для использования параметров. Как и ответы, указанные выше, в вашем примере лучше всего использовать методы, поскольку выполнение очень простое.

Только для справки, в ситуации, когда метод является сложным и стоимость высокая, вы можете кэшировать результаты следующим образом:

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

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

примечание: при использовании этого, наблюдение за памятью при работе с тысячами


0

Вы можете передавать параметры, но либо это не способ vue.js, либо то, как вы делаете, неверно.

Однако есть случаи, когда вам нужно это сделать. Я покажу вам простой пример передачи значения вычисляемому свойству с использованием getter и setter.

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

И сценарий

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

Когда кнопка нажата, мы переходим к вычисленному свойству имя «Roland», и set()мы меняем имя от «John Doe» до «Roland».

Ниже приведен общий пример использования, когда вычисленный используется с геттером и сеттер. Скажем, у вас есть следующий магазин vuex:

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

И в вашем компоненте вы хотите добавить v-modelвход, но используя хранилище 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>
JavaScript, vue.js, vuejs2,
Похожие вопросы
Яндекс.Метрика