The Beauty of Organized Data: Understanding Multiple Columns in VUE JS Projects

Question

The Beauty of Organized Data: Understanding Multiple Columns in VUE JS Projects

I'm currently developing a VUE JS app that calculates route costs for employees based on specific route details.

I am looking to create a VUE JS component that will only display a dropdown list with three columns:

List of countries
Day fee for each country
Night fee for each country

Once a country is selected, an object should be created with the chosen attributes. It's important to note that the list of countries with their respective fees is stored locally in a CSV file and not retrieved from a database.

Your assistance with this matter would be greatly appreciated. Thank you!

I attempted creating a dropdown list by specifying different data columns within the CSV using span tags, but it resulted in each row appearing as a single string rather than separate columns.

javascript vue.js drop-down-menu frontend

Answer 1

Answer №1

Do you need to create a dropdown menu with 3 columns? Alternatively, you could make a dropdown list of countries and then show the corresponding fees. Here's an example:

<template>
  <div>
    <label for="countrySelect">Select a country:</label>
    <select id="countrySelect" v-model="selectedCountry"&g
      <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>

Answer 2

Do you need to create a dropdown menu with 3 columns? Alternatively, you could make a dropdown list of countries and then show the corresponding fees. Here's an example:

<template>
  <div>
    <label for="countrySelect">Select a country:</label>
    <select id="countrySelect" v-model="selectedCountry"&g
      <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>

The Beauty of Organized Data: Understanding Multiple Columns in VUE JS Projects

Answer №1

Similar questions

Troubles with Installing CRA and NextJS via NPM (Issue: Failure to locate package "@babel/core" on npm registry)

Exploring the Functionality of Bootstrap 5 Collapse Component with VueJS 2

How can I implement SSO and Auth for multiple sub-domains using PHP?

The resizing of the window does not trigger any changes in the jQuery functions

Typescript having issues compiling to commonjs/es2015 accurately

Incorporating the "+ " icon in Vuejs Dropzone to indicate the presence of existing images

The code threw an error stating: "Error: Unable to set a new value to the unalterable property 'children' of the object '#<Object>'"

Altering the background color of an individual mat-card component in an Angular application

Encountering a SonarQube error message stating "Unnecessary 'undefined' should be removed" when using "undefined" as a function argument

Interested in accessing JSON data from another domain? CORS has got you covered

I've been attempting to relocate a CSS element at my command using a button, but my previous attempts using offset and onclick were unsuccessful

Incorrect implementation of Bootstrap CSS in Jade template

capturing the HTML title and storing it in a JavaScript variable

What are the steps to releasing and utilizing a Node package in Laravel 5?

Looking to showcase duplicate ranks that have been selected, and specifically identify which ranks are being duplicated using JavaScript/jQuery

restore the HTML element to its initial position after being moved

Traversing through each element using Array method

Implementing jQuery autocomplete on dynamically generated fields post page load

What is the best way to update the state of object.item[n] that is nested within an array, which in turn is nested within

Adding a class to an element within a React template using JS is not possible