Home>

A common sample that takes JSON from the outside with AXIOS and displays in V-for loops, but it is possible to change the URL at GET to AXIOS to some extent is it.

HTML (PHP) as follows

(/hoge.php? ID= 5)
≪
DIV ID= "HOGEAPP" >
    ≪
div V-for= "Program in Progams" >
      {{Program .Name}}
    ≪
/DIV >
≪
/DIV >
≪
script src= "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" >
≪
/Script >
≪
Script src= "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" >
≪
/Script >
≪
script src= "./Main.js" >
≪
/Script >

As there is a Vue page made with JS as follows,

(main.js)
VAR HOGEApp= new Vue ({
    el: '#hoGeApp',
    Data: {
        PROGRAMS: [],
        ID: '',
    }
    MOUNTED () {
        axios
            .get ("json-programs.php? ID="+ ID)
            .Then (Response= >
 {
                this.programs= Response.Data;
            })
    }
})

What you want to do, you want to specify an ID in the query string at the AXIOS GET stage so that you can only get JSON of the ID data specified in the HTML query string (in this case json-programs.php? ID= I want to get data from 5).

When this source is executed, the DATA: ID of Main.js in the initial state is empty, so the URL passing to AXIOS.get at the Mounted stage has not been completed.

I thought it would be better to pass the HTML query string ID (5) to the VUE app variable ID before MOUNTED, but I do not know how.

Generally, after acquiring all data, it will be Filter in Computed, but because the amount of data is large, there is a situation where the data to be acquired is at the minimum.
Also, although the text box and ID were bi-directional binding, etc., I want to use the HTML query string ID as it is, so if possible, the extra text box does not want to put on the screen.

What kind of way is it?
Alternatively, do you have to make it a component in this case?

Implementation is likely to change by the value (in this case 5) (regardless of Vue.js). Is the ID of 5 as of MOUNTED already decided? If it is determined and can be obtained from JavaScript (for example, it is included in the query string of the page itself), Vue.js, regardless of Vue.js, it can use it (if the above example Location.Search) I think it should be good.

urin2021-04-06 22:40:36

Thank you for your comment. Source Sample A prerequisite to specify an ID in query string. Like advice, I was able to get it with location.search. Thank you very much. (However, I think that there is no more good way to access browser objects from Main.js, so there is no more good way.)

Youichirou Mukou2021-04-06 22:40:36
  • Answer # 1
    It seems to be resolved in the

    comment column.

    Identity (5) is the value (regardless of Vue.js), however, the implementation method does not change by JavaScript. Is the ID of 5 as of MOUNTED already decided? If it is determined and can be obtained from JavaScript (for example, it is included in the query string of the page itself), Vue.js, regardless of Vue.js, it can use it (if the above example Location.Search) I think it should be good.

    If this answer is good Answer approvalplease do.