Using Keys to close Snackbars

[Harlekin]

Hi there,

I would like to console log the key of a single snackbar. Further, i want to close specific snackbars in needed moments, out of the template code in my own service for example or and without necessary user interaction (clicking the close button). In my case with using slice the index changes.

Could you provide a sample where its possible to use the close function outside the template?

Thanks!

[Aymeric]

I'm not sure to understand what you're trying to do. You have several examples in the demo

If you can provide some code example, it might help…

By playing with your global array, you can change/close a notification.

[Harlekin]

We've multiple snackbars with timeout -1 and have to take care about closing each snackbar on its own.
At least if we slice the array of snackbars. So the index changes on all other snackbars.

I trie to give you an overview:

The Template

<v-snackbars :objects.sync="interactivities" bottom right :timeout="-1">

      <!-- Convert -->
      <template v-slot:action="{message, key, id, close }">
        <div v-if="message.startsWith('Das Video')">
            <!-- <v-btn text @click="close()"> -->
              <span>{{ message }}</span>
              <div class="ma-0" style="width: 100%;">
                <v-progress-circular
                  indeterminate
                  color="white"
                  class="mr-6"
                ></v-progress-circular>
              </div>
            <!-- </v-btn> -->
        </div>
      </template>

      <!-- Upload -->
      <template v-slot:default="{ message }">

          <div v-if="message.startsWith('Upload')">
            <span>{{ message }}</span>
            <v-progress-linear
              v-model="uploadPercentage"
              color="white"
              class="mb-2"
            ></v-progress-linear>
          </div>

      </template>
 </v-snackbars>

An approach to close a snackbar by its key, when needed.

close(key){
    let idx = this.interactivities.findIndex((s) => s.key === key);
    this.interactivities.splice(idx, 1);
  },

The API.Service

setResponse(values, array = 'messages'){
    const response = this.getVueElementById("response");
    response[array].push(values);

    if(typeof response !== "undefined") {
      for (let [key, value] of Object.entries(values)) {
        response[key] = value;
      }
    }
    return (response[array].length -1);
  }

  setProgressResponse(index, message){
    const response = this.getVueElementById("response");
    response.changeMessage(index, message);
  }

  closeProgressResponse(id){
    const response = this.getVueElementById("response");
    response.close(id);
  }

Main Store.js which get triggerd from an Upload Event - here Starts everything.

let uploadKey = APIService.setResponse({message: `Upload ist bei 0 %`}, 'interactivities');
// ...
APIService.setProgressResponse(uploadKey, `Upload ist bei ${uploadPercentage} %`);
if ( uploadPercentage === 100 ){
  APIService.closeProgressResponse(uploadKey);
  let convertKey = APIService.setResponse({ message: `Das Video ${fileName} wird konvertiert` }, 'interactivities');
}
// ...
APIService.closeProgressResponse(convertKey);
APIService.setResponse({message: 'Upload erfolgreich', color: "green"});

Thank you very much for your really quick response 👍

[Aymeric]

Searching for the message in interactivities then closing it with splice works as expected.

See this demo: https://codesandbox.io/s/v-snackbars-demo-forked-y2umvy?file=/src/App.vue

Enter the message in the input, then click on "Close" button, and the snackbar with this message will be closed…

[Harlekin]

Great now you are by me :)
This Solution works good, thanks for your work on that, i appriciate that.

Especially it would be great, if i can use the 'snackbar-key' instead of the msg.

[Aymeric]

Same thing. Just pass a key of your choice to the object, and search for that key.