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

【问题标题】：How to change a Vue.js data value within a method called by a DOM event?如何在 DOM 事件调用的方法中更改 Vue.js 数据值？
【发布时间】：2017-06-13 18:59:22
【问题描述】：

免责声明：我知道 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 的数据属性的值。

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

那么，如何做到这一点呢？

【问题讨论】：

标签： javascript html dom vue.js

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

您始终可以使用v-model 创建双向数据绑定，从而实质上将输入字段的值绑定到info 属性。这样，info 的值会随着用户在输入字段中输入内容而更新。

示例如下：-

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Vue.js stuff</title>
    </head>
    
    <body>
    
        <div id="app">
            <div>You typed {{info}}</div>
            <br>
            <input type="text" v-model="info">
        </div>
    
    </body>
    <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                info: ""
            }
        });
    </script>
    
    </html>

【讨论】：

感谢您的回答！但我的问题实际上是另一回事。你可以在这里查看我的答案。

【解决方案3】：

我没有看到您的问题是什么；您的示例完美运行：

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>

【讨论】：

删除 {{ info }} 并通过 Vue 的 chrome 扩展查看其价值。你会发现它不起作用。我做了和你一样的事情，并注意到只有当来自 Vue 实例的另一个事件被触发（出于某种原因）时，该值才会更新。
如果你 console.log(this.info) 这个值正在改变。我想我不明白你遇到的问题。
@MahmudAdam 抱歉不够清楚。我发现了问题，你可以在这里查看我的答案。