DOMイベントによって呼び出されたメソッド内でVue.jsデータ値を変更するにはどうすればよいですか？

免責事項：私はVue.jsにデータがあることを知っています。 DOMイベントによって呼び出されたメソッド内で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属性には何も変更されません。

これはどのようにするのですか？

出典

2017-01-28 Artenes Nogueira

ここでの問題は、私は2つの異なるコンテキストを混入したことです。

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

次に、このスクリプトの問題を（jsマスクスクリプトなしで）問題を再現しようとしましたが、info属性で何も変更されていないと考えました.Vue.jsのクロム拡張により、は変更されていませんでしたが、入力にどれだけ入力したとしても（空の環境問題なので）空のままでした。

これは私のところからのヒックアップであり、実際の問題は2つの異なるライブラリを1つの入力にバインドすることにあります。最終的にそれらのうちの1つは機能しません。これは別の質問の内容です。

出典

2017-01-28 10:59:27

あなたの問題が何も表示されません。あなたの例では完璧に動作します：あなたは、常にこのように、本質的にinfoプロパティに入力フィールドの値を結合、v-modelを使用して結合双方向のデータを作成することができ

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>

出典

2017-01-28 00:50:42 RyanZim

'{{info}}'を削除し、その値をVueのchrome拡張子から確認します。あなたはそれが動作しないことがわかります。私はあなたと同じことをして、Vueインスタンスからの別のイベントが（何らかの理由で）起動されたときに値が更新されることに気づいた。 –

console.log（this.info）の値が変更されています。私はあなたが持っている問題を理解していないと思います。 –

@MahmudAdam十分に明確でないことを申し訳ありません。私は問題を見つけたので、ここで私の答えをチェックすることができます。 –

。このようにして、ユーザーが入力フィールドに何かを入力すると、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>

出典

2017-01-28 07:39:12 kkaosninja

答えをありがとう！しかし、私の問題は実際には別のものでした。ここで私の答えを尋ねることができます。 –

DOMイベントによって呼び出されたメソッド内でVue.jsデータ値を変更するにはどうすればよいですか？

答えて

関連する問題