Как связать el-select и vuex?

Question

[Aleksandr]

Есть такой вот JSON

"tableForm": {
    "head": {
        "th": [
            "опции",
            "текст1",
            "текст2",
            "текст3"
        ]
    },
    "body": {
        "tr": [
            {
                "td": [
                {
                    "id": 0,
                    "label": "Какой-то текст",
                    "tooltip": "Тут должно быть описание",
                    "name": "text1",
                    "type": "select",
                    "select": {
                        "value": "",
                        "fields": [
                            {
                            "id": 0,
                            "label": "Нет",
                            "value": "Нет"
                            },
                            {
                            "id": 1,
                            "label": "Да",
                            "value": "Да"
                            }
                        ]
                    }
                },
                {
                    "check": true
                },
                {
                    "check": true
                },
                {
                    "check": false
                }
                ]
            },
            {
                "td": [
                {
                    "id": 0,
                    "label": "Какой-то текст",
                    "name": "text1",
                    "type": "select",
                    "tooltip": "Тут должно быть описание 2",
                    "select": {
                        "value": "",
                        "fields": [
                            {
                            "id": 0,
                            "label": "Нет",
                            "value": "Нет"
                            },
                            {
                            "id": 1,
                            "label": "Да",
                            "value": "Да"
                            }
                        ]
                    }
                },
                {
                    "check": false
                },
                {
                    "check": true
                },
                {
                    "check": true
                }
                ]
            },
            {
                "td": [
                {
                    "id": 0,
                    "label": "Какой-то текст",
                    "tooltip": "Тут должно быть описание 3",
                    "name": "text1",
                    "type": "select",
                    "select": {
                        "value": "",
                        "fields": [
                            {
                            "id": 0,
                            "label": "Нет",
                            "value": "Нет"
                            },
                            {
                            "id": 1,
                            "label": "Да",
                            "value": "Да"
                            }
                        ]
                    }
                },
                {
                    "check": true
                },
                {
                    "check": false
                },
                {
                    "check": true
                }
                ]
            }
        ]
    }
}

По нему генерируется табличка

Вот ко компонента

<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th v-for="(item, index) in options.head.th" :key="index">
                        {{ item }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in options.body.tr" :key="index">
                    <td v-for="(item2, index) in item.td" :key="index">
                        <el-tooltip class="item" effect="dark" :content="item2.tooltip" placement="right-start">
                            <span>{{ item2.label }}</span><br/>
                        </el-tooltip>
                        <span class="el-icon-check" v-if="item2.check"></span>
                         <el-select v-if="item2.type == 'select'" v-model="item2.select.value" placeholder="Выберите значение" @change="update">
                            <el-option
                            v-for="item in item2.select.fields"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

Тут используется также v-model, и возникает ошибка Do not mutate vuex store state outside mutation

Как в данной ситуации можно это исправить?

Answer 1

[0xD34F]

Выкидывайте v-model, вместо этого задавайте элементам value, и вешайте обработчик события input, в который будет передаваться имя свойства, а внутри будет дёргаться мутация:

<el-select :value="item2.select.value" @input="onInput(item2.name, $event)">

methods: {
  onInput(propName, propVal) {
    this.$store.commit('updateForm', { propName, propVal });
  },
},

Comments

[Aleksandr]

0xD34F с этим понятно, у меня как раз с самой мутацией проблема, не могу понять как правильно сделать

[0xD34F]

Aleksandr, а что непонятного? Как нужный value найти и проапдейтить в tableForm? Да как-то так:

tableForm.body.tr.find(n => n.td[0].name === propName).value = propValue

Конечно, никакой гарантии, что будет работать, не дам - тот tableForm, что вы показали, это какой-то мусор - у всех select'ов одинаковые имена и id.

[Aleksandr]

0xD34F, Да, спасибо

tableForm.body.tr.find(n => n.td[0].name === propName).td[0].value = propValue

Вы только чуть ошиблись, спасибо

Answer 2

[Roman K]

Очень просто. Достаточно следовать указаниям ошибки: не мутируй стор вне мутаций.

P.S. Использовать индекс, как :key? Ты сам себя пытаешься обмануть?)

Comments

[Aleksandr]

Почему? Не понял вопрос немного