[Vuejs]-VueJS Migration from 2X to 3X Not Working

by

3👍

✅

The main issue is here:

vm.applications = resp;

The old code used vm to refer to the root component, but it’s not assigned in your new code. However, that vm reference was never really necessary. It could’ve been avoided by using an arrow function instead of the regular function.

  1. Change the $.get callback from a regular function into an arrow function.

  2. Replace vm with this.

Vue.createApp({
  ⋮
  methods: {
    loadModel: function () {
      var url = "/Home/ApplicationData";
                    1️⃣
      $.get(url, (resp) => {
          2️⃣
        this.applications = resp;
      });
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@3.2.31"></script>
<script src="https://unpkg.com/axios@0.26.0/dist/axios.min.js"></script>
<div id="app">
<ul>
    <li v-for="application in applications">{{ application.name }}</li>
</ul>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        applications: []
      }
    },
    created() {
        console.log('Vue App Created'); 
        this.loadModel();
    },
    methods: {
        loadModel() {
            var url = "//jsonplaceholder.typicode.com/users";
            axios.get(url).then((resp) => {
                console.log(resp); // Note: For Testing
                this.applications = resp.data;
            });
        }
    }
  }).mount('#app')
</script>
👤tony19

Leave a comment