[Vuejs]-Get Data From PHP And Display In Vue From Fetch

by

-1👍

✅

Found information at this question that led me to the answer to mine.

Updating a vuejs alert component from a fetch return value

I will include my updated code in case someone happens past this question instead of the one linked here.

I had to update the response.text() to response.json(), but the biggest issue was the problem of the this not being recognized inside of the fetch function. I knew that, but in the middle of learning vue, I thought this would behave differently.

const cityChoice = {
    data() {
        return {
            citys: [
                { Abbrev: 'Lima' },
                { Abbrev: 'FtWayne' },
            ],
            err: false
        }
    },

    methods: {

    },
    mounted() {
        var self = this;
        fetch('Controller/get_cities.php', {
            method: 'POST', // *GET, POST, PUT, DELETE, etc.
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            headers: {
                // 'Content-Type': 'application/json'
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            redirect: 'follow', // manual, *follow, error
            referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
            body: '' // body data type must match "Content-Type" header
        }).then(function (response) {
            return response.json();
        }).then(function (data) {
            self.citys = data;
        });

    },

    methods: {
        getCities() {
            var self = this;
            fetch('Controller/get_cities.php', {
                method: 'POST', // *GET, POST, PUT, DELETE, etc.
                cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
                headers: {
                    // 'Content-Type': 'application/json'
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                redirect: 'follow', // manual, *follow, error
                referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
                body: '' // body data type must match "Content-Type" header
            }).then(function (response) {
                return response.json();
            }).then(function (data) {
                self.citys = data
            });


        }
    }
}

Vue.createApp(cityChoice).mount('#cityChoice')

Hopefully this helps someone else who’s trying to pick up the new language.

0👍

//Html
<div id="cityChoice">
    /* <select > to load options on mounted use mounted hook*/
    /* <select v-on:click="getCities">  to load options on click(whatever event)*/
      <option v-for="city in cities">
          {{ city.City }}
      </option>
    </select>
</div>

var app3 = new Vue({
  el: '#cityChoice',
  data(){
    return {
      cities:[],
      err:false
    }
  },
  methods:{
      async getCities() {
        //fetch -> assumption: the php call works -> u can use postman to test this
        let data = await fetch('Controller/get_cities.php', {
          method: 'GET', // *GET, POST, PUT, DELETE, etc.
      })



      //Data will likely have a data.data field
      if( data in data && !data.error){
        //Set data
        this.cities = data.data //this assumes that data.data is correctly formatted from ur php call
      }else{
        this.err = true
      }
      }
  },
  //Add if you want data loaded on paint
  created(){
 // or mounted(){
    this.getCities()
  }
})

See hello world example
https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-hello-world

Leave a comment