Vuex: Store Two-way binding with using <v-for>

Created on 30 Jan 2018 · 1Comment · Source: vuejs/vuex

What problem does this feature solve?

Hi All,
I want to know how can i map vuex's data with inner v-for object.

For example,

In template,

<template>
    <div>
        <table>
            <tbody>
                <tr>
                    <th> Index </th>
                    <th> Name </th>
                    <th> Value </th>
                </tr>
                <tr v-for="(item, index) in testarr" :key="index">
                    <td> {{ index }} </td>
                    <td> {{ item.name }} </td>
                    <td> {{ item.value }} </td>
                    <td> <input type="checkbox" v-model="item.checked"/> </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

And scripts

export default {
    name: 'VueTest',
    data() {
        return {
            testarr: [
                {
                    name: '1234',
                    value: 53535,
                },
                {
                    name: '2352352',
                    value: 5144,
                },
                {
                    name: '61246',
                    value: 2390,
                },
            ],
        }
    },

}

in this situation, (there are not connected with Vuex)
when i check 'checkbox', automatically be made what called checked.

Otherwise with Vuex,

export default {
    name: 'VuexTest',
    data() {
        return {

        }
    },
    computed: {
        vuexdata: {
            get() { return this.$store.state.vuexArr; },
            set(value) { this.$store.commit('updateArr', value); }
        }
    }

}

And template is,

 <tr v-for="(item, index) in vuexdata" :key="index">
                    <td> {{ index }} </td>
                    <td> {{ item.name }} </td>
                    <td> {{ item.value }} </td>
                    <td> <input type="checkbox" v-model="item.checked"/> </td>
                </tr>

there are some APIs with computed data ( get(), set() methods ),
but these are not solution for this.

And i have read https://github.com/vuejs/vuex/issues/936,
but it is not a solution neither.

If there is a point, please comment this.

Thanks!