0

我正在尝试将旧版应用程序从 Vue 2 转换为 Vue 3。我对 Vue 不是很熟悉，我正在尝试遵循他们在其文档网站上提供的新迁移模板，但我遇到了问题。我没有收到任何 JS 控制台错误，但我的 Vue 代码不再呈现。

现有代码

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            applications: []
        },
        created: function () {
            console.log('Vue App Created'); 
            this.loadModel();
        },
        methods:
        {
            loadModel: function () {
                var url = "/Home/ApplicationData";
                $.get(url, function (resp) {
                    console.log(resp); // Note: For Testing
                    vm.applications = resp;
                });
            }
        }
    });
</script>

我对 Vue 3 迁移的尝试

<script>
  Vue.createApp({
    data() {
      return {
        applications: []
      }
    },
    created() {
        console.log('Vue App Created'); 
        this.loadModel();
    },
    methods: {
        loadModel: function () {
            var url = "/Home/ApplicationData";
            $.get(url, function (resp) {
                console.log(resp); // Note: For Testing
                vm.applications = resp;
            });
        }
    }
  }).mount('#app')
</script>

HTML

<div id="app">
<ul>
    <li v-for="application in applications">{{ application.name }} - {{ application.url }}</li>
</ul>
</div>
4

1 回答 1

2

主要问题在这里：

vm.applications = resp;

旧代码用于vm引用根组件，但未在您的新代码中分配。然而，这种vm参考从来都不是真正必要的。通过使用箭头函数而不是常规函数可以避免这种情况。

  1. $.get将回调从常规函数更改为箭头函数。

  2. 替换vm为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>

于 2022-03-05T05:29:45.507 回答