{{# each }} does not work in my component pages

1

When i do a T7 each, it does not work in my component pages

    {{#each cards}}
<div class="swiper-slide">
   <div class="payment-card">
      <div class="row resizable">
         <div class="col-50">
            <img class="atm-logo" src="assets/user/visa-logo.png" alt="Visa Logo">
         </div>
         <div class="col-50">
            <label class="checkbox float-right"><input type="checkbox"><i class="icon-checkbox"></i></label>
         </div>
      </div>
      <div class="row resizable">
         <div class="col-25">
            <h5 class="text-size-15 text-center josefin-sans-bold-font gazelle-blue-text">****</h5>
         </div>
         <div class="col-25">
            <h5 class="text-size-15 text-center josefin-sans-bold-font gazelle-blue-text">****</h5>
         </div>
         <div class="col-25">
            <h5 class="text-size-15 text-center josefin-sans-bold-font gazelle-blue-text">****</h5>
         </div>
         <div class="col-25">
            <h5 class="text-size-15 text-center josefin-sans-bold-font grey-text-color">1234</h5>
         </div>
      </div>
      <div class="row resizable">
         <div class="col-50">
            <h6 class="text-size-10 text-center josefin-sans-light-font grey-text-color">Name</h6>
            <h4 class="text-size-15 text-center josefin-sans-bold-font grey-text-color">Tolu Raph</h4>
         </div>
         <div class="col-50">
            <h6 class="text-size-10 text-center josefin-sans-light-font grey-text-color">Valid Thru</h6>
            <h4 class="text-size-15 text-center josefin-sans-bold-font grey-text-color">05/2020</h4>
         </div>
      </div>
   </div>
</div>
{{/each}}

<script>
   return {
   data () {
           	return {
           		title: 'Histories',
           		histories: [],
   			cards: [],
           	};
           },
   }
</script>
2

data () {

should be

data: function () {
or
data: () => {

This should give a console error as well

3

@Tim did this but not working, with no console error.

4

According to your code, your cards is empty

5

cards is not empty its returns a json response

METHOD

getUserCard: function () {
				var self = this;

				let cardData = {
					token: window.localStorage.getItem('login-token'),
					user_id: window.localStorage.getItem('user-id'),
				};

				app.request.json('https://apiurl.com/', cardData, function (res) {
					console.log(res);
					self.cards.push(res);

					console.log(cards);
				})
			},

JSON RESPONSE

(4) [{…}, {…}, {…}, {…}]
0:
card_cvc: "782"
card_expiration: "08 / 21"
card_holder_name: "imoh richard samuel"
card_number: "4960 5622 6327 ****"
card_type: "mastercard"
created_at: "2020-06-07T16:42:23.000000Z"
id: 4
updated_at: "2020-06-07T16:42:23.000000Z"
user_id: "1"
__proto__: Object
1:
card_cvc: "211"
card_expiration: "11 / 20"
card_holder_name: "udman samual"
card_number: "556 8326 9682 ****"
card_type: "mastercard"
created_at: "2020-06-06T17:21:28.000000Z"
id: 2
updated_at: "2020-06-06T19:12:17.000000Z"
user_id: "1"
__proto__: Object
2:
card_cvc: "991"
card_expiration: "08 / 20"
card_holder_name: "udman samual"
card_number: "4960 0922 7294 ****"
card_type: "visa"
created_at: "2020-06-06T17:22:12.000000Z"
id: 3
updated_at: "2020-06-07T03:56:51.000000Z"
user_id: "1"
__proto__: Object
3:
card_cvc: "287"
card_expiration: "06 / 22"
card_holder_name: "samuel makus"
card_number: "4960 0956 4803 ****"
card_type: "maastercard"
created_at: "2020-06-07T16:43:53.000000Z"
id: 5
updated_at: "2020-06-07T16:43:53.000000Z"
user_id: "1"
__proto__: Object
length: 4
6

You need to use $setState method to correctly update component data https://framework7.io/docs/router-component.html#component-context

7

Try something like this;

app.request.json('https://apiurl.com/', cardData, (res) => {

  this.$setState({
    cards: res
  });

})