如何在数据中使用计算属性或通过总线发出它?我有下面的vue示例,但myComputed总是未定义,但computedData工作正常。
var vm = new Vue({ data(){ return{ myComputed: this.computedData } }, computed: { computedData(){ return 'Hello World' } } })
pxyaymoc1#
不幸的是,由于组件创建时间的原因,无法在数据中使用computed属性:data在计算属性之前求值。
o0lyfsai2#
为了使事情尽可能简单,只需在watcher中完成工作,除非你想将更改发送到不同的组件,或者你想通知很多变量,那么你可能必须使用Vuex或事件总线:
var vm = new Vue({ data(){ return{ myComputed: '', computedData: 'Hello World' } }, created() { this.myComputed = this.computedData; }, watch: { computedData() { this.myComputed = this.computedData; } } });
yvfmudvl3#
watch:{ //your function here }
而不是计算的
tpgth1q74#
如果你使用的是计算/React对象,那么它应该在computed内部,而不是在data内部。只需将代码更改为使用computed而不是data
computed
data
var vm = new Vue({ data(){ return{} }, computed: { computedData(){ return 'Hello World' }, myComputed(){ return this.computedData } } })
你试图使用data作为computed,这是不应该的。数据不像计算对象。这并不是因为组件创建的时间。如果我们更改组件创建时间会怎样?这不会解决任何问题,因为数据将仅采用第一个计算值(仅一个)并且之后将不更新。
kzmpq1sx5#
你可以只处理计算函数
var vm = new Vue({ data(){ return{ //is not necessary } }, computed: { computedData(){ return 'Hello World' } } })
在您的模板中
<template> <div>{{ computedData }}</div> </template>
uurity8g6#
你太夸张了。计算属性的访问方式与模板中的数据属性相同。
var vm = new Vue({ computed: { myComputed(){ return 'Hello World' } } })
在模板中,您可以访问此内容,就像您访问数据一样:
<template> <div>{{ myComputed }}</div> </template>
https://v2.vuejs.org/v2/guide/computed.html
ilmyapht7#
尝试在方法中转换计算的
var vm = new Vue({ data(){ return{ myComputed: this.computedData } }, methods: { computedData(){ return 'Hello World' } } })
这很简单,它的工作原理(不是React式的),但有一个成本:https://medium.com/notonlycss/the-difference-between-computed-and-methods-in-vue-js-9cb05c59ed98
qxsslcnc8#
初始化data时computed不可用。
如果它应该是一次性的(并且不是被动的),您可以通过使用created()钩子在计算属性可用时设置数据来实现这一点:
created()
export default { data: () => ({ myDataBackend: '', }), computed: { computedData () { return 'Hello World' } }, created() { this.$set(this, 'myDataBackend', this.computedData) } }
进一步阅读:有关生命周期挂钩的Vue文档
如果您尝试使用v-model:
v-model
您也可以在元素中使用:value和一些事件,如@change或@keyup。
:value
@change
@keyup
通常,事件携带target.value的更新表单值
target.value
changeMyData
<template> <div> <input type="text" :value="computedData" @keyup="changeMyData" /> <p>{{myDataBackend}}</p> </div> </template> <script> export default { data: () => ({ myDataBackend: 'Hello World' }), methods: { changeMyData(evt) { this.$set(this, 'myDataBackend', evt.target.value) console.log('Changed the value to: ' + evt.target.value) } }, computed: { computedData () { return this.myDataBackend } } } </script>
des4xlb09#
是的,你可以通过使用vue的computed函数在data中使用computed。这里有一个例子。
<template> <div>{{ person.info }}</div> <div><button @click="changePersonId">change id</button></div> </template> <script> import { computed } from 'vue'; export default { data: function() { return { person: { name: 'Evgeny', id: this.generateId(), info: computed(() => `${this.person.name} with id = ${this.person.id}`) } } }, methods: { generateId() { return +`${Math.random()}`.slice(2); }, changePersonId() { this.person.id = this.generateId(); } } } </script>
这是一个关于性能的有趣问题。我希望它没有坏的影响。如果没有,那么这是一个很好的机会,将属性分组在一起,并在子组件之间共享它,而无需在那里重复计算属性。
9条答案
按热度按时间pxyaymoc1#
不幸的是,由于组件创建时间的原因,无法在数据中使用computed属性:data在计算属性之前求值。
o0lyfsai2#
为了使事情尽可能简单,只需在watcher中完成工作,除非你想将更改发送到不同的组件,或者你想通知很多变量,那么你可能必须使用Vuex或事件总线:
yvfmudvl3#
1.但您可以使用
而不是计算的
tpgth1q74#
如果你使用的是计算/React对象,那么它应该在
computed
内部,而不是在data
内部。只需将代码更改为使用computed而不是data
你试图使用
data
作为computed
,这是不应该的。数据不像计算对象。这并不是因为组件创建的时间。如果我们更改组件创建时间会怎样?这不会解决任何问题,因为数据将仅采用第一个计算值(仅一个)并且之后将不更新。
kzmpq1sx5#
你可以只处理计算函数
在您的模板中
uurity8g6#
你太夸张了。计算属性的访问方式与模板中的数据属性相同。
在模板中,您可以访问此内容,就像您访问数据一样:
https://v2.vuejs.org/v2/guide/computed.html
ilmyapht7#
尝试在方法中转换计算的
这很简单,它的工作原理(不是React式的),但有一个成本:
https://medium.com/notonlycss/the-difference-between-computed-and-methods-in-vue-js-9cb05c59ed98
qxsslcnc8#
初始化
data
时computed
不可用。如果它应该是一次性的(并且不是被动的),您可以通过使用
created()
钩子在计算属性可用时设置数据来实现这一点:进一步阅读:有关生命周期挂钩的Vue文档
如果您尝试使用
v-model
:您也可以在元素中使用
:value
和一些事件,如@change
或@keyup
。:value
是输入元素最初使用的值@keyup
事件会更改数据。通常,事件携带
target.value
的更新表单值changeMyData
方法设置值:value
得到更新。data
作为数据存储。但是你也可以使用vuex来代替。des4xlb09#
是的,你可以通过使用vue的computed函数在
data
中使用computed
。这里有一个例子。这是一个关于性能的有趣问题。我希望它没有坏的影响。如果没有,那么这是一个很好的机会,将属性分组在一起,并在子组件之间共享它,而无需在那里重复计算属性。