Question

如何在数据中使用计算属性或通过总线发送？

我有以下vue实例，但myComputed总是未定义但是computedData正常工作。

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

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

Answer 1

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

<td>{{coin['24h_volume_usd'] | currency:'USD':true:'1.0-2'}}</td>

Answer 2

不幸的是，由于组件创建时间的原因，无法在数据中使用计算属性：数据在计算属性之前进行评估。

Answer 3

已使用{{}}在模板中访问“计算”。
但是您可以使用

<canvas id="circle" width="500" height="300" 
        style="position: absolute; top:0; left:0; border:3px solid black;"></canvas>
        <button style="position: absolute; top:200px; left:20px;" onclick="alert('pink')">Click</button>
        </div>
        <button style="position: absolute; top:200px; left:100px;" onclick="alert('yello')">Click</button>

代替计算

Answer 4

如果您使用的是计算/反应对象，则它应位于computed内，而不应位于data内。

只需将代码更改为使用计算而不是数据

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

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

您正尝试将data用作computed，但不能这样。数据不像计算对象那样。

，这不是由于组件创建时间的缘故。如果我们更改了组件创建时间该怎么办？这将无法解决任何问题，因为数据将仅使用第一个计算值（仅一个），之后将不更新。

Answer 5

您可以只使用计算函数

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

并在您的模板中

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

Answer 6

您正在对其过度编码。可以按照与模板中数据道具相同的方式来访问计算道具。

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

在模板中，您可以像访问数据一样访问此内容：

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

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

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

6 个答案: