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

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

javascript html dom vue.js

Javascript 如何在DOM事件调用的方法中更改Vue.js数据值？,javascript,html,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/javas

免责声明：我知道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>


新Vue({
el:“#应用程序”，
数据：{
信息：“”，
},
方法：{
更新：功能（事件）{
value=event.target.value；
this.info=值；
console.log（值）；
}
}
});

每次用户输入内容时，将触发名为

update

的方法的输入。这里的想法是使用用户在输入中键入的值更改名为

info

的数据属性的值

但是，由于某些原因，数据属性的值不会更改。每次启动

update

方法时，当前输入值都会在控制台中通过

console.log（value）

调用正常打印，但

info

属性没有任何更改

那么，如何使这项工作有效呢？

我不明白你的问题是什么；您的示例非常有效：

newvue({
el:“#应用程序”，
数据：{
信息：“”，
},
方法：{
更新：功能（事件）{
value=event.target.value；
this.info=值；
console.log（值）
}
}
});

{{info}}
您始终可以使用v-model
创建双向数据绑定，从而基本上将输入字段的值绑定到info
属性。这样，当用户在输入字段中输入内容时，info
的值就会更新
示例如下：-


Vue.js的东西
您键入了{{info}


var app=新的Vue({
el:“应用程序”，
数据：{
信息：“
}
});
这里的问题是我混合了两种不同的上下文
在另一个脚本中，我也在做同样的事情，但输入绑定到另一个js脚本，该脚本正在对其应用掩码。因此，这导致了info
值未更改的问题
然后我尝试在问题中复制这个脚本中的问题（没有js掩码脚本），然后我认为info
属性中没有任何变化，因为Vue.js的chrome扩展告诉我，值没有变化，无论我在输入中输入了多少，总是保持为空（所以可能是环境问题）
最后，这只是我的一个小插曲，真正的问题在于在一个输入中绑定两个不同的库。最终其中一个库将不起作用，这是另一个问题的内容。
删除{{info}
并通过Vue的chrome扩展查看其值。您会发现它不起作用。我做了与您相同的事情，并注意到该值仅在Vue实例中的另一个事件被触发时才会更新（出于某种原因）。如果您使用console.log（this.info）该值正在更改。我想我不明白您遇到的问题。@MahmudAdam很抱歉不够清楚。我发现了问题，您可以在此处查看我的答案。谢谢您的答案！但我的问题实际上是另一回事。您可以在此处查看我的答案。