时间戳

首页 > 解决方案 > 在 JS 控制台中更改“app”参数的值时，VueJS 不会更新浏览器中的数据

vue.js - 在 JS 控制台中更改“app”参数的值时，VueJS 不会更新浏览器中的数据

问题描述

正如我在问题中已经提到的，下面是一个看似有效且语法正确的 VueJs 示例，我在 Windows 7 64Bit 环境（配置了 Nginx）的 Localhost 中运行：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="application/x-javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{ message }}</h1>
        </div>
        <script type="application/x-javascript">
            var myObject = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
    </body>
</html>

现在，当我在 Firefox 浏览器（版本 65.0）中运行它时，它会显示预期的文本，但是当我 F12 打开控制台并键入app.message = 'Test';然后按 Enter 时，它不会更新浏览器中的文本，就像文档说的那样它会。

我在这里想念什么？

标签： vue.jsvuejs2consolelocalhostvue-directives

解决方案

你应该使用myObject.message = 'Test';. myObject是对 VueJS 应用程序的引用。

推荐阅读