在Vuejs的数据中使用计算属性

uklbhaso  于 2023-05-07  发布在  Vue.js
关注(0)|答案(9)|浏览(154)

如何在数据中使用计算属性或通过总线发出它?
我有下面的vue示例,但myComputed总是未定义,但computedData工作正常。

var vm = new Vue({
  data(){
    return{
      myComputed: this.computedData
    }
  },

  computed: {
    computedData(){
      return 'Hello World'
    }
  }
})
pxyaymoc

pxyaymoc1#

不幸的是,由于组件创建时间的原因,无法在数据中使用computed属性:data在计算属性之前求值。

o0lyfsai

o0lyfsai2#

为了使事情尽可能简单,只需在watcher中完成工作,除非你想将更改发送到不同的组件,或者你想通知很多变量,那么你可能必须使用Vuex或事件总线:

var vm = new Vue({
  data(){
    return{
      myComputed: '',
      computedData: 'Hello World'
    }
  },
  created() {
    this.myComputed = this.computedData;
  },
  watch: {
    computedData() {
      this.myComputed = this.computedData;
    }
  }
});
yvfmudvl

yvfmudvl3#

  1. Computed在模板中已可使用{{ }}访问。
    1.但您可以使用
watch:{
  //your function here
}

而不是计算的

tpgth1q7

tpgth1q74#

如果你使用的是计算/React对象,那么它应该在computed内部,而不是在data内部。
只需将代码更改为使用computed而不是data

var vm = new Vue({
  data(){
    return{}
  },

  computed: {
    computedData(){
      return 'Hello World'
    },
    myComputed(){
     return this.computedData
    }
  }
})

你试图使用data作为computed,这是不应该的。数据不像计算对象。
这并不是因为组件创建的时间。如果我们更改组件创建时间会怎样?这不会解决任何问题,因为数据将仅采用第一个计算值(仅一个)并且之后将不更新。

kzmpq1sx

kzmpq1sx5#

你可以只处理计算函数

var vm = new Vue({
      data(){
        return{
          //is not necessary
        }
      },
    
      computed: {
        computedData(){
          return 'Hello World'
        }
      }
    })

在您的模板中

<template>
  <div>{{ computedData }}</div>
</template>
uurity8g

uurity8g6#

你太夸张了。计算属性的访问方式与模板中的数据属性相同。

var vm = new Vue({
  computed: {
    myComputed(){
      return 'Hello World'
    }
  }
})

在模板中,您可以访问此内容,就像您访问数据一样:

<template>
  <div>{{ myComputed }}</div>
</template>

https://v2.vuejs.org/v2/guide/computed.html

ilmyapht

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

qxsslcnc

qxsslcnc8#

初始化datacomputed不可用。

如果它应该是一次性的(并且不是被动的),您可以通过使用created()钩子在计算属性可用时设置数据来实现这一点:

export default {
  data: () => ({
    myDataBackend: '',
  }),
  computed: {
    computedData () {
      return 'Hello World'
    }
  },
  created() {
    this.$set(this, 'myDataBackend', this.computedData)
  }
}

进一步阅读:有关生命周期挂钩的Vue文档

如果您尝试使用v-model

您也可以在元素中使用:value和一些事件,如@change@keyup

  • :value是输入元素最初使用的值
  • 在输入字段中写入一些字母后,@keyup事件会更改数据。

通常,事件携带target.value的更新表单值

  • changeMyData方法设置值
  • 计算的属性监听数据变化,并且输入字段的:value得到更新。
  • 注意:* 我使用data作为数据存储。但是你也可以使用vuex来代替。
<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>
des4xlb0

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>

这是一个关于性能的有趣问题。我希望它没有坏的影响。如果没有,那么这是一个很好的机会,将属性分组在一起,并在子组件之间共享它,而无需在那里重复计算属性。

相关问题