[Vuejs]-A List with several Columns in VUE JS projects

by

0👍

Is it critical to make a dropdown with 3 columns? If not you can create a dropdown with the list of countries and then display the fees.
Something like that:

<template>
  <div>
    <label for="countrySelect">Select a country:</label>
    <select id="countrySelect" v-model="selectedCountry">
      <option v-for="country in countries" :value="country.value">{{ country.name }}</option>
    </select>
    
    <div v-if="selectedCountry">
      <p>Day Fee: {{ getDayFee(selectedCountry) }}</p>
      <p>Night Fee: {{ getNightFee(selectedCountry) }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCountry: null,
      countries: [
        { name: 'USA', value: 'usa', dayFee: 10, nightFee: 15 },
        { name: 'Canada', value: 'canada', dayFee: 8, nightFee: 12 },
      ]
    };
  },
  methods: {
    getDayFee(country) {
      const selected = this.countries.find(item => item.value === country);
      return selected ? selected.dayFee : 0;
    },
    getNightFee(country) {
      const selected = this.countries.find(item => item.value === country);
      return selected ? selected.nightFee : 0;
    }
  }
};
</script>

Leave a comment