0

Не понимаю, где ошибка, не работает редактирование в Input

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        todos: localData().get()
    },

    mutations: {

        editTodo: (state, id) => {
            let todo = state.todos.find(todo => 
                (todo.id === id))
            todo.edit = true

            localData().set(state.todos)
        },

        update: (state, id, newEvent) => {
            let todo = state.todos.find(todo => 
                (todo.id === id))

            todo.title = newEvent
            todo.edit = false

            localData().set(state.todos)
        },
    },
})


<template>
<li
    :class="{completed}"
>
    <label 
        v-if="!edit"
        @dblclick="editTodo"
    >
        {{ title }}
    </label>
    <input
        v-else
        class="edit" 
        type="text"
        :value="newEvent"
        @keyup.enter="update"
    >
</li>
</template>

<script>
export default {
    name: 'todo',
    props: ['id', 'title', 'edit', 'completed'],

    data() {
        return {
            newEvent: ''
        }
    },

    computed: {
        todos() {
            return this.$store.state.todos
        }
    },
    methods: {
        editTodo() {
            this.$store.commit('editTodo', this.id)
        },
        update() {
            this.$store.commit('update', this.id, this.newEvent)
        },
    }
}

1 ответ 1

0

Попробуйте использовать

v-model="newEvent" 

в инпуте. Это привяжет значение в инпуте к переменной newEvent. Как только изменится значение в инпуте, тут же поменяется значение newEvent.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.