如何在 DOM 事件调用的方法中更改 Vue.js 数据值?

新手上路,请多包涵

免责声明:我知道 Vue.js 中有数据竞价。

所以我有这个:

 <html>
<body>

    <div id="app">
        <input @input="update">
    </div>

    <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
    <script type="text/javascript">

        new Vue({

            el: '#app',

            data: {

                info: '',

            },

            methods: {

                update: function (event) {

                    value = event.target.value;

                    this.info = value;
                    console.log(value);

                }

            }

        });

    </script>

</body>
</html>

每次用户输入内容时,都会触发一个名为 update 的方法的输入。这里的想法是使用用户在输入中键入的值更改名为 info 的数据属性的值。

但是,由于某种原因,数据属性的值不会改变。当前输入值在控制台中正常打印,每次调用 console.log(value) update 方法时都会调用 --- ,但 info 属性没有任何变化。

那么,如何使这项工作?

原文由 Artenes Nogueira 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 372
2 个回答

这里的问题是我混合了两种不同的上下文。

在另一个脚本中,我正在做同样的事情,但是输入绑定到另一个对其应用掩码的 js 脚本。所以,这导致了 info 值没有被改变的问题。

然后我尝试在问题中复制此脚本中的问题(没有 js 掩码脚本),然后我认为 info 属性没有任何变化,因为 Vue.js 的 chrome 扩展向我展示了值没有改变,无论我在输入中输入多少,总是保持空白(所以可能是环境问题)。

最后,这只是我的一个小问题,真正的问题在于在一个输入中绑定两个不同的库。最终其中一个将不起作用,这是另一个问题的内容。

原文由 Artenes Nogueira 发布,翻译遵循 CC BY-SA 3.0 许可协议

我没有看到你的问题是什么;您的示例完美运行:

 new Vue({
  el: '#app',
  data: {
    info: '',
  },
  methods: {
    update: function(event) {
      value = event.target.value;
      this.info = value;
      console.log(value)
    }
  }
});
 <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<div id="app">
  <input @input="update">
  {{ info }}
</div>

原文由 RyanZim 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题