Vue Computed how to set

Question

I'm trying to make lottery Number service I wonder how to set computed I refer to vuedochttps://v2.vuejs.org/v2/guide/computed.html#Computed-Properties so I follow vuedoc but I don't know where is wrong.

<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> -->

this section I will try to set computed method becuase

I can't put image so I replace the url

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

when I save it button It display also ' this one []' so I decided to set computed set

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

first I expected to see same result on screen because I didn't do any action just return

but I encounter power error.

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

Answer 1

In your case, you should use methods instead of computed properties.

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

Or maybe filters.

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

and in your template:

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