web-dev-qa-db-ja.com

DOMイベントによって呼び出されるメソッド内でVue.jsデータ値を変更する方法

免責事項：Vue.jsにはデータの入札があることを知っています。

だから私はこれを持っています：

_<html>
<body>

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

    <script src="https://unpkg.com/[email protected]/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属性は変更されません。

だから、この仕事をする方法は？

javascripthtmldomvue.js
7
Artenes Nogueira

ここでの問題は、2つの異なるコンテキストが混在していることです。

別のスクリプトでは同じことをしていましたが、入力はマスクを適用する別のjsクリプトにバインドされていました。そのため、info値が変更されないという問題が発生しました。

次に、このスクリプトの問題を（jsマスクスクリプトなしで）複製しようとしましたが、info属性では何も変化していないと思ったのは、chrome拡張Vue.jsは、値を変更しなかったことを示しました。入力にどれだけ入力しても、常に空のままでした（環境の問題かもしれません）。

結局のところ、これは私の一部からの単なるハイカップであり、実際の問題は、1つの入力で2つの異なるライブラリをバインドすることにあります。そのうちの1つは機能しなくなり、これは別の質問の内容です。

3
Artenes Nogueira

私はあなたの問題が何であるか見ていません。あなたの例は完璧に動作します：

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/[email protected]/dist/vue.js"></script>
<div id="app">
  <input @input="update">
  {{ info }}
</div>
6
RyanZim

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/[email protected]/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                info: ""
            }
        });
    </script>
    
    </html>
1
kkaosninja