Static GitHub Issues

[201] Question about fetch data

prev: NuxtServerInit is not working well
next: Expose webpack config for ESLint

I have an auth page which contains an dynamic captcha image(which is an svg format, i use v-html to render it), i want to send the captcha image's request from browser so i can cache the page. But when i check the Chrome's network tab, i can't see the request to captcha, i think the request is sent from server-side, so i add an on-click event to confirm my option, when i click it, it made an request from my browser. So, how to confirm the data is retrived from client(browser)?

Here is my code.

...
<div v-html="captcha" v-on:click="refresh"></div>
...
<script>
import axios from '~plugins/axios'

export default {
  name: 'Login',
  async data () {
    const res = await axios.get('/api/captcha');
    return {
      formError: null,
      formUsername: '',
      formPassword: '',
      captcha: res.data
    }
  },
...
methods: {
    refresh: (event) => {
      axios.get('/api/captcha')
        .then((res) => {
          return event.target.innerHTML = res.data
        })
        .catch((error) => {
          console.log(error)
        });
    }
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c172">#c172</a>)</em></sub></div>