Есть таблица в которую нужно добавлять новые записи.
При создании новой записи через форму - все последующие записи связаны с данными в форме. То есть добавили одну запись с определенными данными и при добавлении второй записи - с данными с форме связаны и редактируются все добавленные до этого записи в таблице.
Есть предположение, что нужно пользоваться object.assign, но не особо понятно каким именно образом.
store.js
export const store = createStore({
state:{
items: [],
...
},
mutations:{
SET_ITEMS_TO_STATE: (state, items) => {
state.items = items;
},
SET_PRODUCT_TO_STATE: (state, item) =>{
state.items.push(item);
},
...
},
actions:{
GET_ITEMS_FROM_API({commit}){
return axios(' http://localhost:3000/items', {
method: "GET",
})
.then((items) =>{
commit('SET_ITEMS_TO_STATE', items.data)
return items;
})
.catch((error) =>{
console.log(error)
return error;
})
},
ADD_TO_PRODUCTS({commit}, item){
commit('SET_PRODUCT_TO_STATE', item)
},
...
},
getters:{
ITEMS(state){
return state.items;
},
...
})
компонент, в котором отображаю данные:
<template>
...
<tr v-for="item in this.$store.state.items" :key="item.name"
:item_data="item"
>
<td><input class="adm_input" type="text" :value="`${item.name}`" :readonly="isReadonly"></td>
<td><input class="adm_input" type="text" :value="`${item.bju}`" :readonly="isReadonly"></td>
</tr>
...
</template>
в этом же template ниже есть форма с добавлением нового товара.
<div class="Form_window" v-if="isProductFormActive">
<div class="Form_window_header">
<h3>Добавление товара</h3>
<button class="close_Form" @click="productFormActive">X</button>
</div>
<form class="productForm" @submit.prevent>
<input class="Form_input" v-model="item.name" type="text" placeholder="Наименование товара">
<input class="Form_input" v-model="item.bju" type="text" placeholder="БЖУ товара">
<button class="add_btn" @click="ADD_TO_PRODUCTS(this.item)">Добавить товар</button>
</form>
</div>
<script>
import {mapActions, mapMutations} from 'vuex'
export default {
data(){
return{
item: {
name: '',
imgUrl: '',
bju:'',
desc:'',
price:'',
}
}
},
name: 'productsTable',
methods:{
...mapActions([
'ADD_TO_PRODUCTS',
]),
...mapMutations([
'SET_PRODUCT_TO_STATE'
]),
},
}
</script>
