Leveraging the Axios content delivery network for Vue Template presentation

Question

Leveraging the Axios content delivery network for Vue Template presentation

I am looking to extract JSON data using the Axios library. By utilizing my {{ id }}, I aim to target a specific parameter in the request.

Furthermore, I have an external script file for this purpose.

const Home = { 
    template: `

    <div class="user">
        <h2>user {{ id }}</h2>
        bet
    </div>

    `,
    props: {
        id: {
            type:    String,
            default: 'N/A'
        }
    } 
}

Key CDNs that are included:

<script src="<https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js>"></script>
<script src="<https://unpkg.com/vue-router/dist/vue-router.js>"></script>
<script src="<../../jobs/job.js>"></script>

The routing structure is relatively straightforward:

const router = new VueRouter({
        mode: 'history',
        routes: [
            {
                path: '/jobs/:id?',
                component: Home,
                props:     true
            },
        ],
    })

Many thanks!

javascript vue.js axios vue-router

Answer 1

Answer №1

There seems to be some confusion whether ID is a property or a route parameter in this scenario. It appears that you are utilizing it as a route parameter. If that's the case, and you're not directly passing it into the component, you could consider removing it and instead implementing a computed property to retrieve the ID. Then, include a method that executes your axios request. You can call this method within the mounted hook of your component.

Here's my perspective:

const Home = { 
  template: `

  <div class="user">
    <h2>user {{ id }}</h2>
    bet
  </div>

  `,
  mounted: function() {
    this.myRequest()
  }, 
  computed: {
    id: {
      get: function() {
        return this.$route.params.id
      }
    }
  },
  methods: {
    myRequest() {
      axios.get('/path/to/my/request', { params: { id: id }})
        .then(response => {
          console.log(response)
        }).catch(error => {
          console.log(response)
        })
    }
  }
}

Answer 2

There seems to be some confusion whether ID is a property or a route parameter in this scenario. It appears that you are utilizing it as a route parameter. If that's the case, and you're not directly passing it into the component, you could consider removing it and instead implementing a computed property to retrieve the ID. Then, include a method that executes your axios request. You can call this method within the mounted hook of your component.

Here's my perspective:

const Home = { 
  template: `

  <div class="user">
    <h2>user {{ id }}</h2>
    bet
  </div>

  `,
  mounted: function() {
    this.myRequest()
  }, 
  computed: {
    id: {
      get: function() {
        return this.$route.params.id
      }
    }
  },
  methods: {
    myRequest() {
      axios.get('/path/to/my/request', { params: { id: id }})
        .then(response => {
          console.log(response)
        }).catch(error => {
          console.log(response)
        })
    }
  }
}

Leveraging the Axios content delivery network for Vue Template presentation

Answer №1

Similar questions

Importing Vue Components

Alignment of content layout across two wrapper elements

Tips for transferring a json-encoded variable from a Python function to an embedded JavaScript code within an HTML file using Flask

VueJs does not refresh the JavaScript when the browser back button is pressed

Troubleshooting issues with using Laravel's history mode in conjunction with VueJS

Unable to cancel $interval within factory

YepNope - Holding off on progressing until all dependencies have been loaded

Protecting website pages on both the admin and user side in Next.js 14 to ensure maximum security

What is the best way to convert a string to an object?

Step-by-step guide on building an endless reviews carousel

Is there a way to use setTimeout in JavaScript to temporarily stop a map or loop over an array?

technique for retrieving div information from a different page with ajax

Pass a PHP variable as an array to a JavaScript file, and then print each variable using the echo statement

Developing a terminate button: the ins and outs of halting a request in Node/Express.js

The checkbox's select all functionality is malfunctioning when employed with jquery

Having difficulty updating an angular variable within a callback function

Incorporate the variables specified in the parent PHP file into the PHP code being received through

If the first <select> option is chosen, then a second <select> validation is necessary

After making a request using axios, the background-image URL of a link cannot be modified through jQuery

Having trouble getting Angular Filter to work within a directive expression?