Vue Computed 如何设置

Question

我正在尝试制作彩票号码服务我想知道如何设置计算 我指的是 vuedoc https://vuejs.org/v2/guide/computed.html#Computed-Properties 所以我关注vuedoc但我不知道哪里错了。

<script async src="//jsfiddle.net/rhmyqswp/embed/"></script>


<section class="saved-lotto-numbers">
<div class="saved-lotto-number-box" v-if="savedNumbers.length">
    <ul class="saved-number-list">
        <li v-for=" (savedlottoNumber,index) in savedNumbers" class="saved-lotto-number">

            <span class="eachnumber">{{savedlottoNumber.numbers}}</span>
            <!-- <span class="eachnumber" >{{ displayNumbers(savedlottoNumber.numbers)}}</span> -->

        </li>
    </ul>
</div>
</section>


 <!-- <span class="eachnumber" >{{ displayNumbers(savedlottoNumber.numbers)}}</span> -->

本节我将尝试设置计算方法，因为

我不能放图片，所以我替换了网址

https://scontent-icn1-1.xx.fbcdn.net/v/t31.0-0/p280x280/20231970_1418449444910830_4818341573312628187_o.jpg?oh=7457496ac48f6182ae4bca5e88370113&oe=5A105736)

当我保存按钮时它也显示'这个[]'所以我决定设置计算集

  computed: {
    displayNumbers: function(Numbers) {
        return Numbers;
    }
}

首先我希望在屏幕上看到相同的结果，因为我没有执行任何操作，只是返回

但我遇到电源错误。

  https://scontent-icn1-1.xx.fbcdn.net/v/t1.0-9/20106562_1418455411576900_6516857588571883325_n.jpg?oh=612817d9a803303f42c9bb107993b919&oe=59C8C567

Answer 1

在您的情况下，您应该使用 methods 而不是 computed 属性。

methods: {
  displayNumbers(Numbers) {
      return Numbers
  }
}

或者过滤器。

filters: {
  displayNumbers(Numbers) {
    return Numbers
  }
}

在你的模板中：

<span class="eachnumber" >{{ savedlottoNumber.numbers | displayNumbers }}</span>