我可以在Vue.Js中传递计算属性中的参数

Question

这可以在Vue.Js中传递计算属性中的参数.我可以看到当getter/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未捕获TypeError:fullName不是函数(...)

我应该使用这种方法的方法吗？

Answer 1

很可能你想使用一种方法

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

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

更长的解释

从技术上讲,您可以使用带有如下参数的计算属性:

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

(感谢Unirgy您的基本代码.)

计算属性和方法之间的区别在于计算属性被缓存,并且只有在它们的依赖关系发生变化时才会更改.一个方法将评估其每次调用时.在如此简单的情况下,通过计算属性使用此方法通常没有任何好处.您可以在Vue文档中了解更多相关信息https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

使用Vuex时,这种情况略有不同.Vuex中的AFAIK是从商店同步获取参数化结果的唯一方法(操作是异步的).因此,这种方法被官方Vuex文档列为其getter https://vuex.vuejs.org/guide/getters.html#method-style-access

Answer 2

您可以使用方法,但我更喜欢使用计算属性而不是方法,如果它们不是变异数据或没有外部效果.

您可以通过这种方式将参数传递给计算属性(未记录,但维护者建议,不记得在哪里):

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

编辑:请不要使用此解决方案,它只会使代码复杂化而没有任何好处.

Answer 3

好吧,从技术上讲,我们可以将参数传递给计算函数,就像我们可以将参数传递给vuex中的getter函数一样.这样的函数是返回函数的函数.

例如,在商店的吸气剂中:

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

此getter可以映射到组件的计算函数:

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的项目发生变化时,视图会使用此项目的新属性自动刷新其内容(绑定似乎正常工作).

Answer 4

Filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data.

They don’t change a component’s data or anything, but they only affect the output.

Say you are printing a name:

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>

Notice the syntax to apply a filter, which is | filterName. If you're familiar with Unix, that's the Unix pipe operator, which is used to pass the output of an operation as an input to the next one.

The filters property of the component is an object. A single filter is a function that accepts a value and returns another value.

The returned value is the one that’s actually printed in the Vue.js template.

Answer 5

你可以传递参数，但要么它不是 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”。

下面是一个常见的用例，当计算与 getter 和 setter 一起使用时。假设您有以下 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>

Answer 6

您还可以通过返回函数将参数传递给 getter。当您要查询存储中的数组时，这特别有用：

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

请注意，通过方法访问的 getter 将在您每次调用它们时运行，并且不会缓存结果。

这称为方法样式访问，它记录在 Vue.js 文档中。

Answer 7

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

当你想使用

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