正在编辑Vue中的任务

Question

无法编辑列表我认为问题出在更新突变中。标签一切正常，可能是输入有问题，它不会更新数据。我需要使任务可以在双楔形上进行编辑。

无法编辑列表我认为问题出在更新突变中。标签一切正常，可能是输入有问题，它不会更新数据。我需要使任务可以在双楔形上进行编辑。

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)
        }, //mutations editTodo

        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>
    <label 
        v-if="!edit"
        @dblclick="editTodo"
    >
        {{ title }}
    </label>
    <input
        v-else
        class="edit" 
        type="text"
        :value="newEvent" //it seems he is interrupting the title

        @keyup.enter="update"
    >
</li>
</template>

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

    data() {
        return {
            newEvent: '' //Am I doing the right thing to add 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) //update method

        },
    }
}

Answer 1

首先，让我们定义代码中的错误。您正在使用update函数更新Vuex状态对象，但要提供组件中的:value="newEvent"，因此Vuex看不到这一点。首先，为newEvent创建状态数据和获取方法

state:{
  //..
  newEvent: ""
}

getters:{
  newEvent: state => state.newEvent
}

然后在组件中使用此状态元素

// ..
import { mapGetters } from "vuex"    

// ..
computed:{
  ...mapGetters(["newEvent"])
}

您应该使用类似的逻辑