How to do line breaking in a Vue tag?

Question

How to do line breaking in a Vue tag?

Asked 5 years, 7 months ago

Viewed 150 times

1

Guys, I’m trying to break the line on the cards in the picture, but I can’t. I’ve done it, Row, I’ve made align (of all kinds), I’m not getting it. These cards are stored in an array, there are 52 cards, I need to show 10 on each line.

The code that shows these cards is this one:

<h3 class="ma-4">Baralho</h3>
        <v-layout>
          <v-img class="ma-2 pa-3 carta" v-for="carta in todasAsCartas" :key="carta.id" :src="carta.image"></v-img>
        </v-layout>

and they are stored in that array:

todasAsCartas:[
            { 'id': 1,     'nome': 'Dois de Ouros',      'valor': 2,     'naipe': 'Ouros',     'image': require('@/assets/cartas/doisdeouros.png')},
            { 'id': 2,     'nome': 'Três de Ouros',      'valor': 3,     'naipe': 'Ouros',     'image': require('@/assets/cartas/tresdeouros.png')},
            { 'id': 3,     'nome': 'Quatro de Ouros',    'valor': 4,     'naipe': 'Ouros',     'image': require('@/assets/cartas/quatrodeouros.png')},
            { 'id': 4,     'nome': 'Cinco de Ouros',     'valor': 5,     'naipe': 'Ouros',     'image': require('@/assets/cartas/cincodeouros.png')},
            { 'id': 5,     'nome': 'Seis de Ouros',      'valor': 6,     'naipe': 'Ouros',     'image': require('@/assets/cartas/seisdeouros.png')},
            { 'id': 6,     'nome': 'Sete de Ouros',      'valor': 7,     'naipe': 'Ouros',     'image': require('@/assets/cartas/setedeouros.png')},
            { 'id': 7,     'nome': 'Oito de Ouros',      'valor': 8,     'naipe': 'Ouros',     'image': require('@/assets/cartas/oitodeouros.png')},
            { 'id': 8,     'nome': 'Nove de Ouros',      'valor': 9,     'naipe': 'Ouros',     'image': require('@/assets/cartas/novedeouros.png')},
            { 'id': 9,     'nome': 'Dez de Ouros',       'valor': 10,    'naipe': 'Ouros',     'image': require('@/assets/cartas/dezdeouros.png')},
            { 'id': 10,    'nome': 'Dama de Ouros',      'valor': 11,    'naipe': 'Ouros',     'image': require('@/assets/cartas/damadeouros.png')},
            { 'id': 11,    'nome': 'Valete de Ouros',    'valor': 12,    'naipe': 'Ouros',     'image': require('@/assets/cartas/valetedeouros.png')},
            { 'id': 12,    'nome': 'Reis de Ouros',      'valor': 13,    'naipe': 'Ouros',     'image': require('@/assets/cartas/reisdeouros.png')},
            { 'id': 13,    'nome': 'Ás de Ouros',        'valor': 14,    'naipe': 'Ouros',     'image': require('@/assets/cartas/asdeouros.png')},
            { 'id': 14,    'nome': 'Dois de Espadas',    'valor': 2,     'naipe': 'Espadas',   'image': require('@/assets/cartas/doisdeespadas.png')},
            { 'id': 15,    'nome': 'Três de Espadas',    'valor': 3,     'naipe': 'Espadas',   'image': require('@/assets/cartas/tresdeespadas.png')},
            { 'id': 16,    'nome': 'Quatro de Espadas',  'valor': 4,     'naipe': 'Espadas',   'image': require('@/assets/cartas/quatrodeespadas.png')},
            { 'id': 17,    'nome': 'Cinco de Espadas',   'valor': 5,     'naipe': 'Espadas',   'image': require('@/assets/cartas/cincodeespadas.png')},
            { 'id': 18,    'nome': 'Seis de Espadas',    'valor': 6,     'naipe': 'Espadas',   'image': require('@/assets/cartas/seisdeespadas.png')},
            { 'id': 19,    'nome': 'Sete de Espadas',    'valor': 7,     'naipe': 'Espadas',   'image': require('@/assets/cartas/setedeespadas.png')},
            { 'id': 20,    'nome': 'Oito de Espadas',    'valor': 8,     'naipe': 'Espadas',   'image': require('@/assets/cartas/oitodeespadas.png')},
            { 'id': 21,    'nome': 'Nove de Espadas',    'valor': 9,     'naipe': 'Espadas',   'image': require('@/assets/cartas/novedeespadas.png')},
            { 'id': 22,    'nome': 'Dez de Espadas',     'valor': 10,    'naipe': 'Espadas',   'image': require('@/assets/cartas/dezdeespadas.png')},
            { 'id': 23,    'nome': 'Dama de Espadas',    'valor': 11,    'naipe': 'Espadas',   'image': require('@/assets/cartas/damadeespadas.png')},
            { 'id': 24,    'nome': 'Valete de Espadas',  'valor': 12,    'naipe': 'Espadas',   'image': require('@/assets/cartas/valetedeespadas.png')},
            { 'id': 25,    'nome': 'Reis de Espadas',    'valor': 13,    'naipe': 'Espadas',   'image': require('@/assets/cartas/reisdeespadas.png')},
            { 'id': 26,    'nome': 'Ás de Espadas',      'valor': 14,    'naipe': 'Espadas',   'image': require('@/assets/cartas/asdeespadas.png')},
            { 'id': 27,    'nome': 'Dois de Copas',      'valor': 2,     'naipe': 'Copas',     'image': require('@/assets/cartas/doisdecopas.png')},
            { 'id': 28,    'nome': 'Três de Copas',      'valor': 3,     'naipe': 'Copas',     'image': require('@/assets/cartas/tresdecopas.png')},
            { 'id': 29,    'nome': 'Quatro de Copas',    'valor': 4,     'naipe': 'Copas',     'image': require('@/assets/cartas/quatrodecopas.png')},
            { 'id': 30,    'nome': 'Cinco de Copas',     'valor': 5,     'naipe': 'Copas',     'image': require('@/assets/cartas/cincodecopas.png')},
            { 'id': 31,    'nome': 'Seis de Copas',      'valor': 6,     'naipe': 'Copas',     'image': require('@/assets/cartas/seisdecopas.png')},
            { 'id': 32,    'nome': 'Sete de Copas',      'valor': 7,     'naipe': 'Copas',     'image': require('@/assets/cartas/setedecopas.png')},
            { 'id': 33,    'nome': 'Oito de Copas',      'valor': 8,     'naipe': 'Copas',     'image': require('@/assets/cartas/oitodecopas.png')},
            { 'id': 34,    'nome': 'Nove de Copas',      'valor': 9,     'naipe': 'Copas',     'image': require('@/assets/cartas/novedecopas.png')},
            { 'id': 35,    'nome': 'Dez de Copas',       'valor': 10,    'naipe': 'Copas',     'image': require('@/assets/cartas/dezdecopas.png')},
            { 'id': 36,    'nome': 'Dama de Copas',      'valor': 11,    'naipe': 'Copas',     'image': require('@/assets/cartas/damadecopas.png')},
            { 'id': 37,    'nome': 'Valete de Copas',    'valor': 12,    'naipe': 'Copas',     'image': require('@/assets/cartas/valetedecopas.png')},
            { 'id': 38,    'nome': 'Reis de Copas',      'valor': 13,    'naipe': 'Copas',     'image': require('@/assets/cartas/reisdecopas.png')},
            { 'id': 39,    'nome': 'Ás de Copas',        'valor': 14,    'naipe': 'Copas',     'image': require('@/assets/cartas/asdecopas.png')},
            { 'id': 40,    'nome': 'Dois de Paus',       'valor': 2,     'naipe': 'Paus',      'image': require('@/assets/cartas/doisdepaus.png')},
            { 'id': 41,    'nome': 'Três de Paus',       'valor': 3,     'naipe': 'Paus',      'image': require('@/assets/cartas/tresdepaus.png')},
            { 'id': 42,    'nome': 'Quatro de Paus',     'valor': 4,     'naipe': 'Paus',      'image': require('@/assets/cartas/quatrodepaus.png')},
            { 'id': 43,    'nome': 'Cinco de Paus',      'valor': 5,     'naipe': 'Paus',      'image': require('@/assets/cartas/cincodepaus.png')},
            { 'id': 44,    'nome': 'Seis de Paus',       'valor': 6,     'naipe': 'Paus',      'image': require('@/assets/cartas/seisdepaus.png')},
            { 'id': 45,    'nome': 'Sete de Paus',       'valor': 7,     'naipe': 'Paus',      'image': require('@/assets/cartas/setedepaus.png')},
            { 'id': 46,    'nome': 'Oito de Paus',       'valor': 8,     'naipe': 'Paus',      'image': require('@/assets/cartas/oitodepaus.png')},
            { 'id': 47,    'nome': 'Nove de Paus',       'valor': 9,     'naipe': 'Paus',      'image': require('@/assets/cartas/novedepaus.png')},
            { 'id': 48,    'nome': 'Dez de Paus',        'valor': 10,    'naipe': 'Paus,',     'image': require('@/assets/cartas/dezdepaus.png')},
            { 'id': 49,    'nome': 'Dama de Paus',       'valor': 11,    'naipe': 'Paus',      'image': require('@/assets/cartas/damadepaus.png')},
            { 'id': 50,    'nome': 'Valete de Paus',     'valor': 12,    'naipe': 'Paus',      'image': require('@/assets/cartas/valetedepaus.png')},
            { 'id': 51,    'nome': 'Reis de Paus',       'valor': 13,    'naipe': 'Paus',      'image': require('@/assets/cartas/reisdepaus.png')},
            { 'id': 52,    'nome': 'Ás de Paus',         'valor': 14,    'naipe': 'Paus',      'image': require('@/assets/cartas/asdepaus.png')}           
        ],

The whole code is here:

<template>
  <v-container>
    <v-layout>

      <!-- card do game -->
      <v-card height dark full-width width="1000px">

        <!-- --Botão para sacar uma carta do monte-- -->

        <v-btn class="botaoEstilizado" @click="sacarCartaDoBaralho">
            Sacar +1
        </v-btn>

        <!-- ►►►►►►►►►►►►► -->

        <!-- --Inicio das Cartas da Mão do Player 1-- -->

        <h3 class="ma-4">Cartas na Mão</h3>

        <v-layout align-baseline row>
          <v-img class="ma-2 pa-3 carta" v-for="item in cartasNaMao" :key="item.id" :src="item.image"></v-img>
        </v-layout> 

        <!-- ►►►►►►►►►►►►► -->

        <!-- --Inicio do monte-- -->

        <h3 class="ma-4">Baralho</h3>
        <v-layout>
          <v-img class="ma-2 pa-3 carta" v-for="carta in todasAsCartas" :key="carta.id" :src="carta.image"></v-img>
        </v-layout>

        <!-- ►►►►►►►►►►►►► -->

      </v-card>     
      <!-- ►►►►►►►►►►►►► -->

    </v-layout>
  </v-container>
</template>


<script>


export default {

    data: () => ({
        size: 'sm',
        baralhoTeste: [],

        numeroAleatorioGerado: [],

        todasAsCartas:[
            { 'id': 1,     'nome': 'Dois de Ouros',      'valor': 2,     'naipe': 'Ouros',     'image': require('@/assets/cartas/doisdeouros.png')},
            { 'id': 2,     'nome': 'Três de Ouros',      'valor': 3,     'naipe': 'Ouros',     'image': require('@/assets/cartas/tresdeouros.png')},
            { 'id': 3,     'nome': 'Quatro de Ouros',    'valor': 4,     'naipe': 'Ouros',     'image': require('@/assets/cartas/quatrodeouros.png')},
            { 'id': 4,     'nome': 'Cinco de Ouros',     'valor': 5,     'naipe': 'Ouros',     'image': require('@/assets/cartas/cincodeouros.png')},
            { 'id': 5,     'nome': 'Seis de Ouros',      'valor': 6,     'naipe': 'Ouros',     'image': require('@/assets/cartas/seisdeouros.png')},
            { 'id': 6,     'nome': 'Sete de Ouros',      'valor': 7,     'naipe': 'Ouros',     'image': require('@/assets/cartas/setedeouros.png')},
            { 'id': 7,     'nome': 'Oito de Ouros',      'valor': 8,     'naipe': 'Ouros',     'image': require('@/assets/cartas/oitodeouros.png')},
            { 'id': 8,     'nome': 'Nove de Ouros',      'valor': 9,     'naipe': 'Ouros',     'image': require('@/assets/cartas/novedeouros.png')},
            { 'id': 9,     'nome': 'Dez de Ouros',       'valor': 10,    'naipe': 'Ouros',     'image': require('@/assets/cartas/dezdeouros.png')},
            { 'id': 10,    'nome': 'Dama de Ouros',      'valor': 11,    'naipe': 'Ouros',     'image': require('@/assets/cartas/damadeouros.png')},
            { 'id': 11,    'nome': 'Valete de Ouros',    'valor': 12,    'naipe': 'Ouros',     'image': require('@/assets/cartas/valetedeouros.png')},
            { 'id': 12,    'nome': 'Reis de Ouros',      'valor': 13,    'naipe': 'Ouros',     'image': require('@/assets/cartas/reisdeouros.png')},
            { 'id': 13,    'nome': 'Ás de Ouros',        'valor': 14,    'naipe': 'Ouros',     'image': require('@/assets/cartas/asdeouros.png')},
            { 'id': 14,    'nome': 'Dois de Espadas',    'valor': 2,     'naipe': 'Espadas',   'image': require('@/assets/cartas/doisdeespadas.png')},
            { 'id': 15,    'nome': 'Três de Espadas',    'valor': 3,     'naipe': 'Espadas',   'image': require('@/assets/cartas/tresdeespadas.png')},
            { 'id': 16,    'nome': 'Quatro de Espadas',  'valor': 4,     'naipe': 'Espadas',   'image': require('@/assets/cartas/quatrodeespadas.png')},
            { 'id': 17,    'nome': 'Cinco de Espadas',   'valor': 5,     'naipe': 'Espadas',   'image': require('@/assets/cartas/cincodeespadas.png')},
            { 'id': 18,    'nome': 'Seis de Espadas',    'valor': 6,     'naipe': 'Espadas',   'image': require('@/assets/cartas/seisdeespadas.png')},
            { 'id': 19,    'nome': 'Sete de Espadas',    'valor': 7,     'naipe': 'Espadas',   'image': require('@/assets/cartas/setedeespadas.png')},
            { 'id': 20,    'nome': 'Oito de Espadas',    'valor': 8,     'naipe': 'Espadas',   'image': require('@/assets/cartas/oitodeespadas.png')},
            { 'id': 21,    'nome': 'Nove de Espadas',    'valor': 9,     'naipe': 'Espadas',   'image': require('@/assets/cartas/novedeespadas.png')},
            { 'id': 22,    'nome': 'Dez de Espadas',     'valor': 10,    'naipe': 'Espadas',   'image': require('@/assets/cartas/dezdeespadas.png')},
            { 'id': 23,    'nome': 'Dama de Espadas',    'valor': 11,    'naipe': 'Espadas',   'image': require('@/assets/cartas/damadeespadas.png')},
            { 'id': 24,    'nome': 'Valete de Espadas',  'valor': 12,    'naipe': 'Espadas',   'image': require('@/assets/cartas/valetedeespadas.png')},
            { 'id': 25,    'nome': 'Reis de Espadas',    'valor': 13,    'naipe': 'Espadas',   'image': require('@/assets/cartas/reisdeespadas.png')},
            { 'id': 26,    'nome': 'Ás de Espadas',      'valor': 14,    'naipe': 'Espadas',   'image': require('@/assets/cartas/asdeespadas.png')},
            { 'id': 27,    'nome': 'Dois de Copas',      'valor': 2,     'naipe': 'Copas',     'image': require('@/assets/cartas/doisdecopas.png')},
            { 'id': 28,    'nome': 'Três de Copas',      'valor': 3,     'naipe': 'Copas',     'image': require('@/assets/cartas/tresdecopas.png')},
            { 'id': 29,    'nome': 'Quatro de Copas',    'valor': 4,     'naipe': 'Copas',     'image': require('@/assets/cartas/quatrodecopas.png')},
            { 'id': 30,    'nome': 'Cinco de Copas',     'valor': 5,     'naipe': 'Copas',     'image': require('@/assets/cartas/cincodecopas.png')},
            { 'id': 31,    'nome': 'Seis de Copas',      'valor': 6,     'naipe': 'Copas',     'image': require('@/assets/cartas/seisdecopas.png')},
            { 'id': 32,    'nome': 'Sete de Copas',      'valor': 7,     'naipe': 'Copas',     'image': require('@/assets/cartas/setedecopas.png')},
            { 'id': 33,    'nome': 'Oito de Copas',      'valor': 8,     'naipe': 'Copas',     'image': require('@/assets/cartas/oitodecopas.png')},
            { 'id': 34,    'nome': 'Nove de Copas',      'valor': 9,     'naipe': 'Copas',     'image': require('@/assets/cartas/novedecopas.png')},
            { 'id': 35,    'nome': 'Dez de Copas',       'valor': 10,    'naipe': 'Copas',     'image': require('@/assets/cartas/dezdecopas.png')},
            { 'id': 36,    'nome': 'Dama de Copas',      'valor': 11,    'naipe': 'Copas',     'image': require('@/assets/cartas/damadecopas.png')},
            { 'id': 37,    'nome': 'Valete de Copas',    'valor': 12,    'naipe': 'Copas',     'image': require('@/assets/cartas/valetedecopas.png')},
            { 'id': 38,    'nome': 'Reis de Copas',      'valor': 13,    'naipe': 'Copas',     'image': require('@/assets/cartas/reisdecopas.png')},
            { 'id': 39,    'nome': 'Ás de Copas',        'valor': 14,    'naipe': 'Copas',     'image': require('@/assets/cartas/asdecopas.png')},
            { 'id': 40,    'nome': 'Dois de Paus',       'valor': 2,     'naipe': 'Paus',      'image': require('@/assets/cartas/doisdepaus.png')},
            { 'id': 41,    'nome': 'Três de Paus',       'valor': 3,     'naipe': 'Paus',      'image': require('@/assets/cartas/tresdepaus.png')},
            { 'id': 42,    'nome': 'Quatro de Paus',     'valor': 4,     'naipe': 'Paus',      'image': require('@/assets/cartas/quatrodepaus.png')},
            { 'id': 43,    'nome': 'Cinco de Paus',      'valor': 5,     'naipe': 'Paus',      'image': require('@/assets/cartas/cincodepaus.png')},
            { 'id': 44,    'nome': 'Seis de Paus',       'valor': 6,     'naipe': 'Paus',      'image': require('@/assets/cartas/seisdepaus.png')},
            { 'id': 45,    'nome': 'Sete de Paus',       'valor': 7,     'naipe': 'Paus',      'image': require('@/assets/cartas/setedepaus.png')},
            { 'id': 46,    'nome': 'Oito de Paus',       'valor': 8,     'naipe': 'Paus',      'image': require('@/assets/cartas/oitodepaus.png')},
            { 'id': 47,    'nome': 'Nove de Paus',       'valor': 9,     'naipe': 'Paus',      'image': require('@/assets/cartas/novedepaus.png')},
            { 'id': 48,    'nome': 'Dez de Paus',        'valor': 10,    'naipe': 'Paus,',     'image': require('@/assets/cartas/dezdepaus.png')},
            { 'id': 49,    'nome': 'Dama de Paus',       'valor': 11,    'naipe': 'Paus',      'image': require('@/assets/cartas/damadepaus.png')},
            { 'id': 50,    'nome': 'Valete de Paus',     'valor': 12,    'naipe': 'Paus',      'image': require('@/assets/cartas/valetedepaus.png')},
            { 'id': 51,    'nome': 'Reis de Paus',       'valor': 13,    'naipe': 'Paus',      'image': require('@/assets/cartas/reisdepaus.png')},
            { 'id': 52,    'nome': 'Ás de Paus',         'valor': 14,    'naipe': 'Paus',      'image': require('@/assets/cartas/asdepaus.png')}           
        ],

        tamanhoDoBaralho: 0,

        cartasNaMao: [],

    }),

    mounted: function(){

    },

    methods: {

        sacarCartaDoBaralho(){

          let refId = 0;
          let indice = 0;

          refId = Math.floor(Math.random() * this.todasAsCartas.length);

          for (let i = 0; i <= this.todasAsCartas.length; i++){

            if ( i == refId ){
              indice = i;

            }

          }

          if (indice > -1 && this.todasAsCartas.length > 0){

            let cartaRetirada = this.todasAsCartas.splice(indice,1)
            this.cartasNaMao.push(cartaRetirada[0])
          }

        }

    }

}

</script>

<style>

.carta {
  width: 5px;
  height: 5px;

}

.botaoEstilizado {
  text-decoration: none;
  font-size: 18pt;
  color: red;

}

.quebraDeLinha {
  word-wrap: break-word;
  text-align: center;

}

</style>

1 answer

Browser other questions tagged vue.js img

You are not signed in. Login or sign up in order to post.

by Felipe Duarte • **6,284** points · Answer 1 · 2019-05-06T13:33:00+00:00

I think the problem is in the component v-layout it’s probably a lib that you’re using and maybe it’s using flexbox.

If the v-layout use the display: flex; it forms an infinite horizontal line, this can be solved with flex-wrap: wrap; that adds line breaking, I did an example using css, but you have to see in the documentation of your lib which directive is responsible for the behavior of flex-wrap: wrap;...

new Vue({
  el: "#app",
  data: {
        size: 'sm',
        baralhoTeste: [],

        numeroAleatorioGerado: [],

        todasAsCartas:[
            { 'id': 1,     'nome': 'Dois de Ouros',      'valor': 2,     'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 2,     'nome': 'Três de Ouros',      'valor': 3,     'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 3,     'nome': 'Quatro de Ouros',    'valor': 4,     'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 4,     'nome': 'Cinco de Ouros',     'valor': 5,     'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 5,     'nome': 'Seis de Ouros',      'valor': 6,     'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 6,     'nome': 'Sete de Ouros',      'valor': 7,     'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 7,     'nome': 'Oito de Ouros',      'valor': 8,     'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 8,     'nome': 'Nove de Ouros',      'valor': 9,     'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 9,     'nome': 'Dez de Ouros',       'valor': 10,    'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 10,    'nome': 'Dama de Ouros',      'valor': 11,    'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 11,    'nome': 'Valete de Ouros',    'valor': 12,    'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 12,    'nome': 'Reis de Ouros',      'valor': 13,    'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 13,    'nome': 'Ás de Ouros',        'valor': 14,    'naipe': 'Ouros',     'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 14,    'nome': 'Dois de Espadas',    'valor': 2,     'naipe': 'Espadas',   'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 15,    'nome': 'Três de Espadas',    'valor': 3,     'naipe': 'Espadas',   'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 16,    'nome': 'Quatro de Espadas',  'valor': 4,     'naipe': 'Espadas',   'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 17,    'nome': 'Quatro de Espadas',  'valor': 4,     'naipe': 'Espadas',   'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 18,    'nome': 'Quatro de Espadas',  'valor': 4,     'naipe': 'Espadas',   'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'},
            { 'id': 19,    'nome': 'Quatro de Espadas',  'valor': 4,     'naipe': 'Espadas',   'image': 'https://proxy.duckduckgo.com/iu/?u=http%3A%2F%2F2.bp.blogspot.com%2F-dp7DLax6Ri0%2FVS8tuu4xNdI%2FAAAAAAAAAIM%2FKTvI22eH_BQ%2Fs1600%2F26-10%252Bde%252Bouro.png&f=1'}
        ],

        tamanhoDoBaralho: 0,

        cartasNaMao: [],

    },

    mounted: function(){
        console.clear();
    },

    methods: {

        sacarCartaDoBaralho(){

          let refId = 0;
          let indice = 0;

          refId = Math.floor(Math.random() * this.todasAsCartas.length);

          for (let i = 0; i <= this.todasAsCartas.length; i++){

            if ( i == refId ){
              indice = i;

            }

          }

          if (indice > -1 && this.todasAsCartas.length > 0){

            let cartaRetirada = this.todasAsCartas.splice(indice,1)
            this.cartasNaMao.push(cartaRetirada[0])
          }

        }

    }
})

#app{
  height: 500px;
}
.ctn-cartas {
  display: flex;
  flex-wrap: wrap;
}
.carta {
  width: 50px;
  height: 50px;
}
.botaoEstilizado {
  text-decoration: none;
  font-size: 18pt;
  color: red;
}
.quebraDeLinha {
  word-wrap: break-word;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-container>
    <v-layout>

      <!-- card do game -->
      <v-card height dark full-width width="1000px">

        <!-- --Botão para sacar uma carta do monte-- -->

        <v-btn class="botaoEstilizado" @click="sacarCartaDoBaralho">
            Sacar +1
        </v-btn>

        <!-- ►►►►►►►►►►►►► -->

        <!-- --Inicio das Cartas da Mão do Player 1-- -->

        <h3 class="ma-4">Cartas na Mão</h3>

        <v-layout align-baseline row>
          <v-img class="ma-2 pa-3 carta" v-for="item in cartasNaMao" :key="item.id" :src="item.image"></v-img>
        </v-layout> 

        <!-- ►►►►►►►►►►►►► -->

        <!-- --Inicio do monte-- -->

        <h3 class="ma-4">Baralho</h3>
        <div class="ctn-cartas">
          <img class="ma-2 pa-3 carta" v-for="carta in todasAsCartas" :key="carta.id" :src="carta.image">
        </div>

        <!-- ►►►►►►►►►►►►► -->

      </v-card>     
      <!-- ►►►►►►►►►►►►► -->

    </v-layout>
  </v-container>
</div>