首页 文章

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

提问于
浏览 次
83

这可以在Vue.Js中传递计算属性中的参数 . 我可以看到当getter / setter使用computed时，他们可以获取一个参数并将其分配给变量 . 喜欢这里documentation：

// ...
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不是函数（...）

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

javascript vue.js vuejs2

7 回答

  • 113

    是的方法是使用参数 . 与上述答案一样，在您的示例中，最好使用方法，因为执行非常轻 .

    仅供参考，在方法复杂且成本高的情况下，您可以缓存结果，如下所示：

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

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

    注意：使用此功能时，如果处理数千个，请注意内存

    回复于
  • -1

    最有可能你想使用一种方法：

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

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

    更长的解释

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

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

    （感谢 Unirgy 获取此基本代码 . ）

    计算属性和方法之间的区别在于 computed properties are cached 并且仅在其依赖关系发生更改时才会更改 . A method will evaluate every time its called . 使用这种方法比计算属性这样的情况没有任何好处 . 您可以在Vue文档中了解更多相关信息https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

    这种情况略有 different when use Vuex . Vuex中的AFAIK是从商店同步获取参数化结果的唯一方法（操作是异步的） . 因此，这种方法被官方Vuex文档列为其吸气剂https://vuex.vuejs.org/guide/getters.html#method-style-access

    回复于
  • 5

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

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

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

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

    回复于
  • 15

    好吧，从技术上讲，我们可以将参数传递给计算函数，就像我们可以将参数传递给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的项目发生变化时，视图会使用此项目的新属性自动刷新其内容（绑定似乎正常工作） .

    回复于
  • 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' .

    下面有一个常见的用例，当计算与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>
    回复于
  • 0

    您还可以通过返回函数将参数传递给getter . 当您想要查询商店中的数组时，这尤其有用：

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

    请注意，通过方法访问的getter将在每次调用时运行，结果不会被缓存 .

    这称为方法式访问，它是is documented on the Vue.js docs .

    回复于
  • 0

    我不完全确定你想要实现什么，但看起来你会完全没有使用方法而不是计算！

    回复于

相关问题