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

这可以在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 


 }


}


//...



计算属性接受参数并返回所需的输出。 但是,当我尝试这个时,我得到了这个错误:

vue.common.js:2250 未捕获的TypeError: fullName不是函数( 。)

我应该使用这种情况的方法吗?

时间:

你可以使用方法,但我更喜欢使用计算属性而不是方法,如果他们不改变数据或没有外部效果。

你可以通过以下方式将参数传递给compute属性:


computed: {


 fullName: function () {


 var vm = this;


 return function (salut) {


 return salut + ' ' + vm.firstName + ' ' + vm.lastName; 


 };


 }


}



编辑:请不要使用这个解决方案,它只使代码复杂而没有任何好处。

技术上讲,我们可以将参数传递给计算函数,同样的方法,我们可以将参数传递给vuex中的getter函数。 这样的函数是返回函数的函数。

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

你可以传递参数,但不是 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 "。

below: 计算时有一个通用用例与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>



...