どのようにVUE

Question

に保存するときに私のコンポーネントで更新された値を取得する私はこのような状態からいくつかの小道具を取得：

computed: mapGetters({ 
     id: 'downloadId', 
     pageLimit: 'pageLimit', 
     pageMaxSize: 'pageMaxSize', 
     cleaningInterval: 'cleaningInterval' 
    }) 

を、私はプロパティバインド：

<input type="number" v-model.number="pageLimit" id="pageMaxSize" /> 

保存方法：

を

methods: { 
    onSave() { 
    alert('Your data: ' + JSON.stringify(this.pageLimit)) 
    } 
} 

入力フィールドに値を入力して保存ボタンをクリックすると、this.pageLimitは初期値のままです

更新された値を取得するにはどうすればよいですか？

Answer 1

あなたのコードには2つの問題があります：

1. v-modelはcomputedに過ぎず、dataして使用する必要があります。 Vue.js内のcomputedプロパティ値は、それが依存する値または変更された値が変更されていないかぎり、変更できません。

2. 状態を直接更新することはできません。これはvuexのルールの1つです。それを更新するには、そのためにvuex突然変異を使用する必要があります。

だから、解決策は以下のとおりです。

1. はtempPageLimitと呼ばれるdataプロパティを作成し、v-modelを使用して入力にバインドします。 storeで

2. 、tempPageLimitの値でpageLimitを更新し、mapMutationsを使用してコンポーネントにマップ変異を作成します。

3. onSaveメソッド内でこの突然変異を実行します。

look herevuex突然変異についてお読みになりたい場合は、hereをご覧ください。