web-dev-qa-db-ja.com

チェックボックスをVuexストアにバインドする方法は？

いくつかのチェックボックスを含むコンポーネントがあります。 Vueアプリケーションの他のコンポーネントからチェックされているチェックボックスにアクセスできる必要がありますが、チェックボックスを適切に接続する方法を理解することはできません（オンラインで見つけることもできません）。私のVuexストア。

コンポーネント内のチェックボックスをVuexストアに接続して、チェックボックスがv-modelを介してコンポーネントデータに接続されているかのように機能する正しい方法は何ですか？

これが私がやろうとしていることの出発点です（非常に基本的な意味で）

Code in jsfiddle below

https://jsfiddle.net/9fpuctnL/

目的は、カラーチェックボックスコンポーネントで選択された色を取得して、Vuexストアを経由して選択された色コンポーネントに出力することです。

checkboxvuejs2vuex
7
Denno

計算されたプロパティ をgetterとして使用できます vuex getter および setter 計算されたプロパティでは、 mutation を呼び出します。これを行うための状態プロパティ。

この例を見ることができます ここ 双方向の計算されたプロパティ：

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}
16
Saurabh

OK私は自分の解決策を示すように挑戦されました。ここにあります jsfiddle上

htmlは次のとおりです。

<div id="app">
  <label v-for="brother in ['Harpo','Groucho','Beppo']">
    <input type='checkbox' v-model='theBrothers' v-bind:value='brother' />
      {{ brother }}
  </label>
  <div>
  You have checked: {{ theBrothers }}
  </div>
</div>

そしてjsは：

const store = new Vuex.Store({
  state: {
    theBrothers: []
  },
})

new Vue({
  el: "#app",
  store: store,
  computed: {
    theBrothers: {
      set(val){this.$store.state.theBrothers = val},
      get(){ return this.$store.state.theBrothers }
    }
 },
})
7
Les Nightingill

実際にチェックボックスを使用した回答を提供したかったのです。

ここで概説する1つの可能な解決策があります： Vuex動的チェックボックスバインディング

そして、より簡単な解決策は、次のようなものを実現できます。

<div v-for="tenant in tenants" 
     v-bind:key="tenant.id" 
     class="form-group form-check">

<input type="checkbox" 
     class="form-check-input" 
     v-bind:id="tenant.id" 
     v-bind:value="tenant.name" 
     @change="updateSelectedTenants">

ここで重要なのは、on-changeを使用してメソッドを呼び出すことです。メソッドは、変更を行うために必要なすべての詳細を含むイベントをメソッドに渡します。

@change関数：

updateSelectedTenants(e) {
  console.log('e', e.target)
  console.log('e', e.target.value)
  this.$store.dispatch('updateSelectedTenants', e.target)
}

ここで値が必要です。この場合はテナント名になりますが、ターゲットをさらに調べると、「id」が表示され、チェックボックスが「オン」かオフかがわかります。

ストアで、「selectedTenants」配列を操作できます。

updateSelectedTenants (context, tenant) {
  if(tenant.checked) {
    // Tenant checked, so we want to add this tenant to our list of 'selectedTenants'
    context.commit('addSelectedTenant', { id: tenant.id, name: tenant.value })
  } else {
    // otherwise, remove the tenant from our list
    context.commit('removeSelectedTenant', tenant.id)
  }
}

実際のミューテーターは次のとおりです。

addSelectedTenant (state, tenant) {
  this.state.selectedTenants.Push(tenant)
},
removeSelectedTenant (state, id) {
  this.state.selectedTenants = this.state.selectedTenants.filter(tenant => {
    return tenant.id != id
  })

Vuejsのドキュメントは素晴らしいですが、実際の例で少し説明することもあります。私はthinkとは思いませんが、get（）、set（）...を使用して、計算値を使用して上記を実現することは可能ですが、できる解決策を見るために。

1
comfytoday

使用する @change必要に応じてVuexを更新するには：

HTML：

<input
  v-for='item in items'
  @change='update_checkboxes'
  v-model='selected_checkboxes'
  :value='item.id'
  type='checkbox
/>
<label>{{item.name}}</label>

JS：

data: function(){ 
  return {
    selected_checkboxes: [] // or set initial state from Vuex with a prop passed in
  }
},
methods: {
  update_checkboxes: function(){
    this.$store.commit('update_checkboxes', this.selected_checkboxes)
  }
}
0
Meekohi

データのcolors = []を削除する必要があります。

0
smoothdvd