How to update iframe in vue.js?

@hal.littel 

To update an iframe in Vue.js, you need to bind the iframe's src attribute to a data property in your Vue component. Then, when you want to update the iframe, you can simply change the value of the data property.

Here's an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
  <div>
    <iframe :src="iframeSrc"></iframe>
    <button @click="updateIframe">Update Iframe</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: 'https://www.example.com'
    };
  },
  methods: {
    updateIframe() {
      this.iframeSrc = 'https://www.updated-example.com';
    }
  }
};
</script>

In this example, the iframe's src attribute is bound to the iframeSrc data property. When the "Update Iframe" button is clicked, the updateIframe method is called, which changes the value of iframeSrc, thereby updating the iframe with the new URL.

@hal.littel 

In addition to updating the src attribute of the iframe, you can also add a key attribute to the iframe element to force it to completely re-render when the src changes. This can help avoid some caching issues.

Here's an updated example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<template>
  <div>
    <iframe :key="iframeKey" :src="iframeSrc"></iframe>
    <button @click="updateIframe">Update Iframe</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: 'https://www.example.com',
      iframeKey: 0
    };
  },
  methods: {
    updateIframe() {
      // Update key to force iframe to re-render
      this.iframeKey++;
      // Update src
      this.iframeSrc = 'https://www.updated-example.com';
    }
  }
};
</script>

In this example, we added an iframeKey data property and bound it to the key attribute of the iframe element. When you want to update the iframe, you increment the value of iframeKey, which forces the iframe to re-render with the new source URL. This approach can help ensure the iframe updates correctly without any caching issues.