时间戳

首页 > 解决方案 > 如何更新以下代码中的 msg 变量？

vue.js - 如何更新以下代码中的 msg 变量？

问题描述

我在单个 Vue 组件中编写了以下代码。我对 Vue 很陌生。我想知道如何更新以下msg变量并将更新后的值传递给此 Vue 组件中的模板：

<template>
    <div class="dropzone">
        <form id="dropzone" method='POST' enctype="multipart/form-data" v-on:drop="upload" @dragover.prevent>
            <my-vue-component v-model="msg" ref="markdownEditor" />
        </form>
    </div>
</template>

<script>
    export default {
        data: () => {
            return {
                msg: 'zyx'
            }
        },
        methods: {
            upload: (e) => {
                self.msg = '123'
            }
        }
    }
</script>

我真的被困住了，谷歌将我重定向到的链接都没有超出我的范围。因为他们都在谈论new Vue({})或不提供太多export default。

我在这里做错了吗？

我也尝试过this.msg，但后来我收到错误消息msg of undefined...

标签： vue.js

解决方案

改变这个：

upload: (e) => {
    self.msg = '123'
}

对此：

upload (e) {
    this.msg = '123'
}

请注意，这upload (e) {是 的简写upload: function (e) {。

主要变化是：

  1. 使用this而不是self.
  2. 不要使用箭头函数，因为它会绑定this到周围的作用域，在这种情况下就是全局作用域。您想要的是this绑定到您的组件实例（实际上是一个 Vue 实例），因此您需要使用普通函数。Vue 试图确保绑定是正确的，但它不能用箭头函数做到这一点，因为它已经被绑定了。

像这样的组件中出现的配置选项几乎与您将传递给的配置选项相同new Vue，因此如果您看到使用另一个的示例，几乎不会有任何区别。通常，当配置设置对其中一个或另一个没有意义时，这很明显。

推荐阅读