Question

免责声明：我知道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属性没有任何变化。

那么，如何使这项工作？

Answer 1

我没看到你的问题是什么;你的例子很完美：

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>

Answer 2

这里的问题是我混合了两种不同的背景。

在另一个脚本中我做了同样的事情，但输入被绑定到另一个js cript，它正在应用一个掩码。因此，这导致info值未被更改的问题。

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

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

Answer 3

您始终可以使用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>

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

3 个答案: