Vue 3 – Buttons not updating after second dropdown changes

I am fairly new to Vue and am having a hard time figuring out how to solve this issue. I have gotten really far on an in-depth project, but am banging my head over what should be a simple feature...

Brief Background/Overview:

I get data from an API (my own), which fetches a study the user has created. They can swap to another one of their studies, which changes the data on the page (stars which indicate the item is in the study already). This is their "overall page view study". They can add items on the page to a study. They click the item, a Bootstrap 5 modal pops up with a dropdown of their studies. The current page study is selected by default, but they can choose any of their other studies to add it to if they want. So if they are adding the item to another study (not the one they are viewing), we assume they can add it and let the API return a special response (409), in which it would show the user an "that already is in the study" message (toast/flash message/etc). If it is their current "page study", then they should be able to add it if it doesn't exist, or remove it if it already is in the study.

I just wanted to provide a background overview just in case something in it can make a difference in the solution (Vue3, Bootstrap 5, bootstrap modal, select dropdown, etc).

Due to the complexity and propriety, I have created a generic mock-up replicating the issue, as well as a JSFiddle.

Issue:

I have a dropdown (study selector) and 2 buttons (Add and Remove). If they choose a study from the dropdown that isn't the currently viewed "page study", we assume "Add". If it is the currently viewed "page study", we need to do a check. It checks if that "item" is in the study. If it is, then show the "Remove" button, else show the "Add" button.

When I choose an item that IS already in the selected "page study", it does show the "Remove" button (at first). Then when I toggle to a different study in the dropdown, it swaps the buttons (shows "Add"). So far so good... However, when I swap it back to the current "page study", the "Add" button stays when it SHOULD swap to the "Remove" button... It's like it updated once and is ignoring me and no longer listening lol.

I have tried watchers, computed, tried to forceUpdate... I just don't know enough about Vue to get this working.

Mock App Code with dummy data:

<div id="app">
  Study ID: {{ currentStudyId }}
  
  <br><br>

  Selected StudyData Item: 
  <select v-model="selectedStudyDataItem">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
  </select>

  <br><br>

  <select v-model="selectedStudyModel" name="study_id" class="form-select">
    <option disabled value="">Choose a study...</option>
    <option v-for="item in studies" :value="item.id" :key="item.id">
      {{ item.title }}
    </option>
  </select>

  <button v-show="showAddButton()" type="submit" class="btn btn-primary">Add</button>

  <button v-show="showRemoveButton()" type="submit" class="btn btn-danger">Remove</button>
</div>

new Vue({
  el: '#app',
    data() {
      return {
        'currentStudyId': 2,
        'selectedStudyDataItem': 1,
        'selectedStudyModel': '',       // dropdown model
        'studies': [
          {'id': 1, 'title': 'Study 1'},
          {'id': 2, 'title': 'Study 2'},
          {'id': 3, 'title': 'Study 3'},
          {'id': 4, 'title': 'Study 4'},
        ],
        'studyData': {
          'title': 'My Cool Study',
          'user_id': 1,
          'items': [
            1, 3
          ],
        },
      }
    },
  
  methods: {
    showAddButton() {
        // if it isnt the current study, we assume add and let api handle it
        if ( this.selectedStudyModel !== this.currentStudyId ) {
          return true;
        }
      
        // else, if it isn't in the current viewed study, we can add it
        if ( ! this.isInStudy(this.selectedStudyDataItem) ) {
          return true;
        }
      
        return false;
    },
    showRemoveButton() {
      if ( this.selectedStudyModel === this.currentStudyId ) {
        if ( this.isInStudy(this.selectedStudyDataItem) ) {
          return true;
        }
      }
      
      return false;
    },
    isInStudy(something) {
      if ( this.studyData ) {
        const match = (item) => item === something;
        return this.studyData.items.some(match);
      }

      return false;
    }
  }
  
});

JSFiddle



Read more here: https://stackoverflow.com/questions/67392242/vue-3-buttons-not-updating-after-second-dropdown-changes

Content Attribution

This content was originally published by Wade at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: