How to update iframe in vue.js - vue.js

Question

I have an Iframe
<iframe v-show="this.$store.getters['rackStore/getIframe'].show === 'iframe'" ref="iframe_3d" :src="this.$store.getters['rackStore/getIframe'].ref" id="iframe_3d" allowfullscreen="true" style="width: 100%; height: 100%; z-index: -1; position: fixed; top: 0px; left: 0px; border: 1px solid #00f; "></iframe>
And it displays the data perfectly.
Src I take from Vuex
Then I want to change the src value:
let iframe_param = this.$store.getters['rackStore/getIframe'];
this.$store.commit('rackStore/setIframe', { ...iframe_param, show: 'iframe', ref: model.ref } );
And I mean in the console that the src value of the iframe is changing!
But the iframe itself is not updated in the browser for some reason.
I tried to force update it: this.$ForceUpdate ();
This does not work.
I've tried changing the src in the usual way without Vue, this also doesn't work:
<iframe v-show="this.$store.getters['rackStore/getIframe'].show === 'iframe'" ref="iframe_3d"
src="" id="iframe_3d"
allowfullscreen="true" style="width: 100%; height: 100%; z-index: -1; position: fixed; top: 0px; left: 0px; border: 1px solid #00f; ">
</iframe>
var iframe = document.getElementById('iframe_3d');
iframe.src = model.ref;
src changes but no data refresh occurs, the previous site is still open in the iframe
What to do?
Thank you in advance!

Answer 1

Try update the element using key attribute:
<template>
<!-- ... -->
<iframe v-show="this.$store.getters['rackStore/getIframe'].show === 'iframe'" ref="iframe_3d" :src="this.$store.getters['rackStore/getIframe'].ref" id="iframe_3d" allowfullscreen="true" style="width: 100%; height: 100%; z-index: -1; position: fixed; top: 0px; left: 0px; border: 1px solid #00f; " :key="iframeUpdate"></iframe>
<!-- ... -->
</template>
<script>
export default {
// ...
data() {
return {
iframeUpdate: false
}
},
}
</script>
When your value in Vuex changes, simultaneously change iframeUpdate variable value like this:
this.iframeUpdate = !this.iframeUpdate;