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

标签 javascript html 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 的数据属性的值。

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

那么,如何让它发挥作用呢?

最佳答案

我不明白你的问题是什么;您的示例完美运行:

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>

关于javascript - 如何在 DOM 事件调用的方法中更改 Vue.js 数据值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41905089/

相关文章:

javascript - 查询后不包含对象名称?

javascript - Selectize.js "Uncaught TypeError: Cannot read property ' extend' of undefined"

html - 如何通过CSS放置 flex 的文字

javascript - 获取一些父元素 ID 以发送给 JavaScript 函数

javascript - 当我返回到上一个组件时,Angular 重新初始化组件

javascript - 使用正则表达式从字符串中删除所有非拉丁段落

javascript - 将 PHP 变量传递给 jQuery 时遇到问题

javascript - 提交多个表单同一个 jquery 脚本

javascript - 在动态创建的元素上的单击事件监听器上包含子元素

javascript - getElementsByClassName 与 getElementById 不同(支持浏览器)