尽管已定义...但未定义计算属性-vue.js

Question

我正在使用Vue.js处理新项目，并且向我显示了这样的错误：

  

[Vue警告]：属性或方法“ myImage”未在   实例，但在渲染过程中被引用。确保此属性是   在data选项中或对于基于类的组件，通过   初始化属性。

代码如下：

<template>
          <div class="selectedPlayer"><div class="avatar" v-bind:style="myImage"></div>
          <div class="playerName">{{ playerName }}</div>
        </div>
</template>

<script>

export default {
  name: 'messageForPlayer',
  props: [ "playerId", "playerName" ],
  data () {
    return {
//        myImage: "background-image: url(/src/img/uploads/101.jpg)",
    }

  },
  computed: {
    myImage: function () {
      return {
        'background-image': "url(/src/img/uploads/101.jpg)"
      }
    }
  }} 
</script>

如您所见，有一个名为“ myImage”的计算属性，该属性带有硬编码值（仅用于测试，通常它来自道具），但是会导致错误。如果我在数据中散列“ myImage”-一切正常，但这是动态价值。 我在做什么错了？

Kalreg