Avoiding the use of numbers in v-if in Vue.js

Question

Avoiding the use of numbers in v-if in Vue.js

My website features a left menu that displays different content based on the selected menu's ID.

However, I currently have === 0 and === 1 in the v-if statement, and I'm looking for a way to avoid manually inputting these numbers.

<template>
  <v-card elevation="2" class="experiences-container">
    <v-layout row wrap>
      <v-flex md3 sm12 xs12 class="relative">
        <div class="settings-list"
          :class="switchSetting ? 'open' : ''">
          <v-list>
            <v-list-tile
              v-for="(item, index) in menu"
              :key="index"
              :class="['experience-item', index === idSelectedSetting ? 'active' : '']"
              @click="updateSelectedSetting(index)"
            >
              <v-list-tile-content>
                <v-list-tile-title>{{ item.name }}</v-list-tile-title>
              </v-list-tile-content>
              <v-list-tile-action v-if="index == idSelectedSetting ? true : false">
                <v-icon>chevron_right</v-icon>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
        </div>

      </v-flex>
      <v-flex md9 sm12 xs12>
          <UserPasswordEdition class="setting-details"
            v-if="idSelectedSetting === 0"
            :class="switchSetting ? 'close' : ''"
          />
          <div
            class="setting-details"
            :class="switchSetting ? 'close' : ''"
            v-if="idSelectedSetting === 1">
            <div class="WIP">Another menu</div>
          </div>
      </v-flex>
    </v-layout>
  </v-card>
</template>

--

data() {
    return {
        menu: [
            { name: 'Password' },
            { name: 'Other menu' }
        ],
      idSelectedSetting: 0,
      switchSetting: false,
    };
  },
  methods: {
    updateSelectedSetting(id) {
      this.idSelectedSetting = id;
      this.closeSwitchSetting();
    },
    openSwitchSetting() {
      this.switchSetting = true;
    },
    closeSwitchSetting() {
      this.switchSetting = false;
    }
  }

--

I am trying to change the v-if statement here:

<UserPasswordEdition class="setting-details"
            v-if="idSelectedSetting === 0"
            :class="switchSetting ? 'close' : ''"
          />
          <div
            class="setting-details"
            :class="switchSetting ? 'close' : ''"
            v-if="idSelectedSetting === 1">
            <div class="WIP">Another menu</div>
          </div>

I attempted using a v-for loop, but I struggled with it as it displayed both contents on each menu. Any guidance on how to properly implement a v-for in this situation would be greatly appreciated. Thank you!

javascript vue.js

Answer 1

Answer №1

To start, you can establish an array containing all of your choices. Utilize :is for rendering individual components.

Make sure to include an index in your data and compare it with a selectedIndex during the rendering process.

data() {
 return {
  selectedIndex: 0, //default value goes here
  itemsToShow: [
   {
    id: 0,
    component: 'UserPasswordEdition',
   },
   {
    id: 1,
    component: 'OtherComponent'
   }
  ]
 }
}

Then update your template

<template>
  ...
  <v-flex md9 sm12 xs12>
    <component v-for="option in itemsToShow" 
               :key="option.id" 
               :is="option['component']
               v-if="selectedIndex === option.id"
    />
  </v-flex>
</template>

Note: This method is suitable when passing the same props to all components. Otherwise, the rendering logic may become more intricate.

Edit: In response to @Jer's caution regarding using v-for and v-if together.

You also have the option to employ a computed property to filter your array.

computed: {
 filteredItemsToShow() {
   return this.itemsToShow.filter(item => item.id === this.selectedIndex)
  }
}

Subsequently, utilize filteredItemsToShow during the rendering phase.

<template>
  ...
  <v-flex md9 sm12 xs12>
    <component v-for="option in filteredItemsToShow" 
               :key="option.id" 
               :is="option['component']
    />
  </v-flex>
</template>

Observe the elimination of v-if, as it is integrated into the computed property.

Answer 2

To start, you can establish an array containing all of your choices. Utilize :is for rendering individual components.

Make sure to include an index in your data and compare it with a selectedIndex during the rendering process.

data() {
 return {
  selectedIndex: 0, //default value goes here
  itemsToShow: [
   {
    id: 0,
    component: 'UserPasswordEdition',
   },
   {
    id: 1,
    component: 'OtherComponent'
   }
  ]
 }
}

Then update your template

<template>
  ...
  <v-flex md9 sm12 xs12>
    <component v-for="option in itemsToShow" 
               :key="option.id" 
               :is="option['component']
               v-if="selectedIndex === option.id"
    />
  </v-flex>
</template>

Note: This method is suitable when passing the same props to all components. Otherwise, the rendering logic may become more intricate.

Edit: In response to @Jer's caution regarding using v-for and v-if together.

You also have the option to employ a computed property to filter your array.

computed: {
 filteredItemsToShow() {
   return this.itemsToShow.filter(item => item.id === this.selectedIndex)
  }
}

Subsequently, utilize filteredItemsToShow during the rendering phase.

<template>
  ...
  <v-flex md9 sm12 xs12>
    <component v-for="option in filteredItemsToShow" 
               :key="option.id" 
               :is="option['component']
    />
  </v-flex>
</template>

Observe the elimination of v-if, as it is integrated into the computed property.

Answer 3

Answer №2

If you want to simplify your code, you can move your condition to a computed property like this:

<template>
  ...
  <v-flex md9 sm12 xs12>
    <UserPasswordEdition class="setting-details"
      v-if="!isSelectedSetting"
      :class="switchSetting ? 'close' : ''"
    />
    <div
      class="setting-details"
      :class="switchSetting ? 'close' : ''"
      v-if="isSelectedSetting"
    >
      <div class="WIP">Another menu</div>
    </div>
  </v-flex>
</template>

<script>
  export default {
    data() {
      return {
        menu: [
          { name: 'Password' },
          { name: 'Another menu' }
        ],
        idSelectedSetting: 0,
        switchSetting: false,
      };
    },
    computed: {
      isSelectedSetting() {
        return this.idSelectedSetting === 1
      }
    }
  }
</script>

Answer 4

If you want to simplify your code, you can move your condition to a computed property like this:

<template>
  ...
  <v-flex md9 sm12 xs12>
    <UserPasswordEdition class="setting-details"
      v-if="!isSelectedSetting"
      :class="switchSetting ? 'close' : ''"
    />
    <div
      class="setting-details"
      :class="switchSetting ? 'close' : ''"
      v-if="isSelectedSetting"
    >
      <div class="WIP">Another menu</div>
    </div>
  </v-flex>
</template>

<script>
  export default {
    data() {
      return {
        menu: [
          { name: 'Password' },
          { name: 'Another menu' }
        ],
        idSelectedSetting: 0,
        switchSetting: false,
      };
    },
    computed: {
      isSelectedSetting() {
        return this.idSelectedSetting === 1
      }
    }
  }
</script>

Avoiding the use of numbers in v-if in Vue.js

Answer №1

Answer №2

Similar questions

In pursuit of increased speed

transform constant values into API requests using React

Using React JS to automatically execute an event based on a specific state value

Is there a way to resolve the MongoDB Database-Differ Error?

Bundling sub-components using Rollup for NodeJS application packaging

Repairing div after upward scrolling and maintaining its fixation after refreshing the page

Express.js encountering an `ERR_HTTP_HEADERS_SENT` issue with a fresh Mongoose Schema

Occasionally, data may fail to be fetched when using a Jquery GET

Is there a way to pull information from a string and organize it into a two-dimensional array?

What is the method for activating the on collapse event with a bootstrap navbar?

Unable to successfully retrieve the output from a function within an AJAX request

Executing a jQuery script on various elements of identical types containing different content (sizes)

What is the best way to transfer the value of a <span> element to a different <div> using jQuery or JavaScript

Saving the current language (i18n) in local storage using VueJS

Upon receiving data from the Api, the data cannot be assigned to the appropriate datatype within the Angular Object

The Evolution of Alternatives to contentEditable

Utilizing React Router: Combining MemoryRouter and Router for Dynamic Routing (leveraging memory for certain links while updating the URL for others)

Listener for clicking on a marker in Google Maps

What is the best way to create a select box in React that allows for both single and multiple selections?

Exploring JSON data structures using autocomplete functionalities