Когда вы нажимаете кнопку «Добавить» , вы должны проверить, введен ли какой-либо текст в ввод и, если да, то какой-то объект должен быть добавлен с текстом введен в ввод и затем сохранен в localalstorage . При перезапуске программы этот объект должен вернуться на страницу. Также можно удалить объект, нажав кнопку Удалить Для компонента этот код работает.
Вот как это работает.
Теперь мне нужно перевести все на vuex. Но я не могу сделать это правильно. Когда я ввожу текст в поле ввода в консоли, я получаю сообщение об ошибке «Ошибка в v-on обработчике:« TypeError: e.target не определена ». И как только я убираю фокус с ввода, вводимый там текст исчезнет. Также я не могу использовать v-модель, так как она не поддерживается фреймворком 7
Как это работает сейчас
Мой код в компоненте
<f7-block strong>
<f7-block-title>Some items</f7-block-title>
<f7-block v-for="(cat, n) in compCats">
<span>{{ cat }}</span>
<f7-button fill color="red" @click="removeCat(n)">Delete Cat</f7-button>
</f7-block>
<f7-list form>
<f7-list-input
:value="compNewCats"
@input="newCatOnInput"
type="text"
placeholder="Заметка"
></f7-list-input>
<f7-button fill color="blue" @click="addCat">Add some item</f7-button>
</f7-list>
</f7-block>
<script>
export default {
computed:{
compCats(){
return this.$store.state.cats;
},
compNewCats(){
return this.$store.state.newCat;
}
},
mounted() {
if (localStorage.getItem('cats')) {
try {
this.cats = JSON.parse(localStorage.getItem('cats'));
} catch(e) {
localStorage.removeItem('cats');
}
}
},
methods: {
addCat(e) {
this.$store.commit('addNewCat');
},
newCatOnInput(e){
this.$store.commit('newCatInput', e.target.value);
},
removeCat(n){
this.$store.comit('removeSomeCat');
}
}
}
</script>
Мой код в VUEX
export default new Vuex.Store({
state: {
cats:[],
newCat: null
},
mutations: {
addNewCat(state) {
if (!this.newCat) {
return;
}
this.state.cats.push(this.state.newCat);
this.state.newCat = '';
this.saveCats();
},
removeSomeCat(x) {
this.state.cats.splice(x, 1);
this.saveCats();
},
saveCats(state) {
const parsed = JSON.stringify(this.state.cats);
localStorage.setItem('cats', parsed);
},
newCatInput(payload) {
this.newCat = payload;
},
}
}
});