Vue 3 - 'this' 引用方法而不是应用程序答案

【问题标题】：Vue 3 - 'this' references methods and not appVue 3 - 'this' 引用方法而不是应用程序
【发布时间】：2020-12-09 23:37:28
【问题描述】：

我在使用 Vue 3 创建从数组中删除项目的方法时遇到问题。该方法执行正确，但“this”指的是“methods”。

<div id="blog-posts-demo">
    <div class="container">
        <div class="row">
            <blog-post class="col-4"
                       v-for="post in posts"
                       v-bind:id="post.id"
                       v-bind:key="post.id"
                       v-bind:title="post.title">
            </blog-post>
        </div>
    </div>
</div>

<button onclick="App.methods.remove(3)">
    Delete Item
</button>

@section Scripts {

    @*<script src="~/js/signlartest.js"></script>*@

    <script src="~/js/vue/vue.global.js"></script>

    <script type="text/javascript">

        var App = {
            data() {
                return {
                    name: 'Cards',
                    posts: [
                        { id: 1, title: 'Card 1' },
                        { id: 2, title: 'Card 2' },
                        { id: 3, title: 'Card 3' },
                        { id: 4, title: 'Card 4' },
                        { id: 5, title: 'Card 5' },
                        { id: 6, title: 'Card 6' },
                        { id: 7, title: 'Card 7' },
                        { id: 8, title: 'Card 8' },
                        { id: 9, title: 'Card 9' },
                        { id: 10, title: 'Card 10' }
                    ]
                }
            },
            methods: {
                remove(itemId) {
                    console.log('this: ' + this);
                    console.log('app.name ' + App.name);
                    console.log('itemId ' + itemId);
                }
            }
        }

        const app = Vue.createApp(App);

        app.component('blog-post', {
            props: ['title', 'id'],
            template: `
<div class='card'>
    <h4>
        {{ title }}
    </h4>
</div>
`
        })

        app.mount('#blog-posts-demo')

    </script>

}

这是我单击“删除项目”按钮时的输出：

this: [object 对象]

(index):104 app.name 未定义

（索引）：105 itemId 3

根据我找到的所有文档和示例，在其当前上下文中，“this”应该是指数据对象。谁能告诉我我做错了什么？

我的最终目标是能够在外部添加/删除/更新由 Vue 管理的模型。

谢谢！

【问题讨论】：

你 console.log App.name ...this 和它有什么关系？ this.name 是什么（而不是 App.name）
这只是尝试排除故障并找到引用应用程序属性的方法

标签： javascript vue.js vue-component

【解决方案1】：

当您像这样调用 remove 时，您正在绕过 Vue。要获得正确的 this 绑定，您需要通过组件实例。

您可以获取mount 返回的根组件实例。像这样的：

const vm = app.mount('#blog-posts-demo')

只要您在全局范围内创建vm，您就可以在您的onclick 中调用vm.remove(3)。

【讨论】：