<template>
  <h1>v-once Example</h1>
  <p>The image is only rendered once. Changing the image source does not have any effect.</p>
  <img v-once v-bind:src="imgUrl[imgIndex]">
  <p>Img src: '{{ imgUrl[imgIndex] }}'</p>
  <button v-on:click="changeImg">Change image</button>
</template>

<script>
export default {
  data() {
    return {
      imgIndex: -1,
      imgUrl: [
        'img_fish.svg',
        'img_tiger.svg',
        'img_turtle.svg'
      ]
    }
  },
  created(){
    this.imgIndex = Math.floor(Math.random()*this.imgUrl.length);
  },
  methods: {
    changeImg() {
      this.imgIndex++;
      if (this.imgIndex >= this.imgUrl.length) {
        this.imgIndex = 0;
      }
    }
  }
}
</script>

<style scoped>
img {
  width: 200px;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')