動的な変更は、私がVUEファイルで作業してフォームを持っていvuejs入力

Question

上では動作しません。 ：

var instance = new Vue({ 
el: "#General", 
data: { 
    [...] 
    pattern: [] 
} 

と言われています。私はいつも「アクションa」をしています。私は 'アクションa'を行うたびに必要な値で適切なアラートを持っていますが、入力は0のままで動的に変更されません。

Answer 1

コードに問題があります。まず、のはあなたのAJAXリクエストを見てみましょう：あなたのdata応答の形式は

request.success(function(data){ 
    if(data['pattern']==='yes'){ 
     this.pattern=data[0]; 
     alert(this.pattern['value']); 
    } 
}) 

は何ですか？あなたがdata['pattern']で何かをチェックしている、そして、あなたはあなたが次にdata[0]

を呼び出すthis.pattern何かに関連付けしようとしているので、@thanksdの回答で述べたように、あなたはあなたのAJAXコールバックで間違ったthisを参照している、あなたが作成する必要がありますself変数：

var self = this 

var request = $.ajax({ 
    url: '{{ path ('home') }}promos/pattern/'+value, 
}) 

request.success(function(data){ 
    if(data['pattern']==='yes'){ 
     self.pattern=data[0]; 
     alert(this.pattern['value']); 
    } 
}) 

は最後に、あなたが書く：

<input type="number" class="form-control" v-model="amount" v-bind:value="pattern['value']"]> 

だから、いくつかのミスがここにあります。まず、ここでは何もしない行末に]があります。

第2に、あなたはv-bind:valueを使用していますが、これは応答するものではありません。この入力を応答させるには、v-modelを使用し、入力値を変更する場合はamountの値を設定する必要があります。

希望します。

Answer 2

3つのこと：あなたのsuccessハンドラ内

1. thisは、Vueのインスタンスを参照していません。ハンドラのスコープの外に参照を設定し、それを代わりに使用する必要があります。

2. successコールバックを最初にjQueryのajaxメソッドにチェーンすることはできません。これは、呼び出しに渡されたパラメータオブジェクトのプロパティとして定義されています。 （たぶん、あなたは間違った上でコードをコピーした？）

3. は、あなたが入力の値は、次のようになりますv-bind:value="pattern"

あなたのコードに縛ら値を反映したい場合はv-model="amount"を取り除く必要があります。

let self = this; // set a reference to the Vue instance outside the callback scope 

var request = $.ajax({ 
    url: '{{ path ('home') }}promos/pattern/'+value, 
    success: function(data) { // success handler should go in the parameter object 
    if (data['pattern']==='yes') { 
     self.pattern=data[0]; 
     alert(this.pattern['value']); 
    } 
    } 
})