Игорь

Как мне нужно изменить код, чтобы v-select занимал не всю ширину контейнера, в котором он находиться, а столько, сколько ему необходимо для отображения своих чисел и чтобы он был выровнен по правому краю.

server {
    listen      			<ip>:<port>;
    server_name 			<ваш домен>;

    location / {
	proxy_pass  		http://127.0.0.1:3000;	
	#proxy_read_timeout	2s
        proxy_set_header	Host $host;
        proxy_set_header	X-Real-IP $remote_addr;
        proxy_set_header	X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header	X-Forwarded-Host $server_name;
    }
}

// Загрузка городов
      let cities_items = await getCities({
        country_id: 3159,
        offset: 0,
        count: 50
      });

      // Загрузка регионов
      let regions_items = await getRegions({
        country_id: 3159
      });

      const max_cols = 4

      let regions = []
      let regions_size = Math.ceil(regions_items.length / max_cols); //размер подмассива
      for (let i = 0; i < Math.ceil(regions_items.length / regions_size); i++) {
        regions[i] = regions_items.slice((i * regions_size), (i * regions_size) + regions_size);
      }

      let cities = []
      let cities_size = Math.ceil(cities_items.length / max_cols); //размер подмассива
      for (let i = 0; i < Math.ceil(cities_items.length / cities_size); i++) {
        cities[i] = cities_items.slice((i * cities_size), (i * cities_size) + cities_size);
      }

<v-row>
      <v-col md="12" cols="12">
        <v-card class="pb-5">
          <v-card-title>Популярные города</v-card-title>
          <v-card-text>
            <v-row>
              <v-col
                md="3"
                sm="6"
                cols="12"
                v-for="(cities_item, cities_index) in cities"
                :key="cities_index"
                class="pa-0 text-left"
              >
                <ul>
                  <li v-for="(item, index) in cities_item">{{ item.name }}</li>
                </ul>
              </v-col>

            </v-row>
          </v-card-text>
        </v-card>
      </v-col>

      <v-col md="12" cols="12">
        <v-card class="pb-5">
          <v-card-title>Регионы России</v-card-title>
          <v-card-text>
            <v-row>
              <v-col
                md="3"
                sm="6"
                cols="12"
                v-for="(regions_item, region_index) in regions"
                :key="region_index"
                class="pa-0 text-left"
              >
                <ul>
                  <li v-for="(item, index) in regions_item">{{ item.name }}</li>
                </ul>
              </v-col>
            </v-row>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

<template>
  <b-row>
    <b-col sm="6" lg="4" xl="3" v-for="product in products" :key="product.id">
      <div class="image" v-lazy:background-image="product.image">
        Видно если нажали "Купить".
      </div>
      <div class="d-flex justify-content-between">
        <div>
          <p class="mb-0">{{product.name}}</p>
          <p class="mb-0">{{product.price}} грн.</p>
        </div>
        <b-button class="align-self-center" variant="outline-dark" @click="buyProduct(product)">Купить</b-button>
      </div>
    </b-col>
  </b-row>
</template>

<script lang="javascript">
  import { BRow, BCol, BButton } from 'bootstrap-vue'
  import { mapState, mapActions } from 'vuex'

  export default {
    components: {
      BRow,
      BCol,
      BButton
    },
    computed: mapState({
      products: state => state.product.all
    }),
    methods: {
      buyProduct(product){
        console.log(product)
      }
    }
  }
</script>

<b-button class="align-self-center" variant="outline-dark" @click.once="buyProduct(product.id)">Купить</b-button>

events()
    {

        let search = debounce(async ({e, value, f}) => {
            let response = await Digest.fastSearch({
                q: value
            })
            f(response.items)
        }, 1000)

        this.$root.$on("on-root-main-search-change", async ({e, value, f}) => {
            search({e, value, f})
        })
    }

this.$parent.$emit("on-main-menu-select-item", {item})

this.$on("on-main-menu-select-item", ({item}) => {
                    console.debug(item)
                })

export default {
        name: "CardRows",
        components: {Card},
        props: {
            items: [],
            OnClickItem: Function
        },

        methods: {
        

            itemClick({id, name}){
                if (typeof this.OnClickItem === "function"){
                    this.OnClickItem({id, name})
                }
            }
        }
    }