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

Looking for subsequence in dropdown choices with no assigned values

Issue arises when child component fails to receive updated props from parent component after data changes in parent component

Having trouble integrating a custom button into the toolbar of the Tinymce Vue.js wrapper

Encountering a problem when trying to send an API request for multer in order to save

Enhance Your Vue Tables with Unique Custom Filters

Modify the page's query parameters by incorporating an input field within NextJS's App Router

Customizable form fields in AngularJS

Synchronization between Vue and Node API on the go

How to verify if both MySQL queries in Node.js have fetched results and then display the page content

What is the best way to retrieve the Axios response using Express?

Exploring Vue.js: Navigating Through an Array of Images Nested Within Another Array

Update the text on the button when tasks are in progress in React

Troubleshooting a Vue.js formatting problem in Visual Studio 2019

Delivering Django and Vue applications efficiently through an Nginx server

How can you use JavaScript to create hyperlinks for every occurrence of $WORD in a text without altering the original content?

Gulp is ensuring the destination file remains unchanged

Encountering difficulties setting cookies within the app router in Next.js

Updating dynamic content in IBM Worklight V6.1 with jQuery Mobile v1.4.3 requires waiting for the DOM to load

Unable to retrieve information from v-for as it returns null data

Can you provide a list of factors that influence coverage? Additionally, is there a specific algorithm available for calculating