Modal does not get updated value from data

I am able to console.log the updated value of selected however it is not shown in the interpolation of the modal. Here is my template code:

<template>
  ...
    <AppModal>
      <v-card class="delete-confirm-modal">
        <v-card-title
          class="headline delete-confirm-modal-title"
          primary-title
        >
          Are you sure you want to delete
          {{ selected[0] }} // <-- This is where it does not display
        </v-card-title>
        <v-container class=" text-center">
          <v-btn
            class="modal-action"
            depressed
            @click="delete"
          >
            Confirm
          </v-btn>
          <v-btn
            class="modal-action"
            dark
            depressed
            @click="close"
          >
            Cancel
          </v-btn>
        </v-container>
      </v-card>
    </AppModal>
  </div>
</template>

And here is the script for it:

<script>
  /* more imports here */
  import AppModal from './AppModal.vue';

  export default {
    name: 'ComponentContainer',
    components: {
      ...
      AppModal
    },
    props: {
     ...
    },
    data() {
      return {
        selected: [''],
        ...
      };
    },
    computed: {
      ...mapGetters({
        categories: 'CATEGORIES',
        error: 'ERROR'
      })
    },
    methods: {
      ...mapActions([
        'getAllCategories',
        'setError'
      ]),
      open() {
        this.$store.dispatch('openDialog');
      },
      close() {
        this.$store.dispatch('closeDialog');
      },
      async select({propsId, action}) {
        const operation = action.toLowerCase();
        const {items} = this.$store.state;
        const newSelected = items.find(({id}) => id === propsId);
        this.$set(this.selected, 0, newSelected.properties.name);
        console.log(this.selectedCategory); // <-- e.g. ["asasas", __ob__: Observer]
        if (operation === 'delete') { this.open(); }
      },
      async delete() {
        ...
      }
    }
  };
</script>

I am not so sure what is wrong already tried a bunch of things like await this.$nextTick(); but still it did not work, I am also able to delete the correct item by the way.

Have you tried something like this

...,
data: () => ({
 selected: [],
}),
methods: {
 select({propsId, action}) {
  ...
  this.selected.push(...);
  ...
 },
},
...,

Tried it but what happens is I only get the name of the second item I select. When I try to choose other item it’s stuck on the second item name that I selected.

Hi. I don’t see selected in your data definition? Could this be the problem?

1 Like

That’s selectedCategory, forgot to rename it to selected.

1 Like

One more stupid question :slight_smile: do you need selected to be an array? Do you have multiple selected items?

I tried using empty string or null but still it does not work. I found out the issue, my implementation is incorrect.

I utilized Vuex for the status of the modal, and for each item there is a corresponding modal so what happens is that when I try to open a single modal, all of modal opens up and the last modal would only be viewable.

I changed my implementation to pass props for the modal to fix my issue.

1 Like