我想使用 Nuxt.js 添加编辑功能

Question

我想要实现的事情

我正在创建 TodoLists。 我尝试实现以下编辑功能，但没有成功，我遇到了问题。

1. 单击编辑按钮可在输入字段中显示编辑文本
   
2. 如果您在输入字段中输入更改后单击保存按钮，更改将反映在第一个位置。

代码

      <v-row v-for="(todo,index) in todos" :key="index">
        <v-text-field
          filled
          readonly
          :value="todo.text"
          class="ma-3"
          auto-grow
        />
        <v-menu
          top
          rounded
        >
          <template #activator="{ on, attrs }">
            <v-btn
              v-bind="attrs"
              icon
              class="mt-6"
              v-on="on"
            >
              <v-icon>
                mdi-dots-vertical
              </v-icon>
            </v-btn>
          </template>
          <v-list>
            <v-list-item
              link
            >
              <v-list-item-title @click="toEdit(todos)">
                <v-icon>mdi-pencil</v-icon>
                Edit
              </v-list-item-title>
            </v-list-item>
          </v-list>
          <v-list>
            <v-list-item
              link
            >
              <v-list-item-title @click="removeTodo(todo)">
                <v-icon>mdi-delete</v-icon>
                Delete
              </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-row>

      <v-text-field
        v-model="itemText"
        filled
        color="pink lighten-3"
        auto-grow
        @keyup.enter="addTodo"
      />
      <v-btn
        :disabled="disabled"
        @click="addTodo"
      >
        Save
      </v-btn>

  data () {
    return {
      editIndex: false,
      hidden: false,
      itemText: '',
      items: [
        { title: 'Edit', icon: 'mdi-pencil' },
        { title: 'Delete', icon: 'mdi-delete' }
      ]
    }
  },

  computed: {
    todos () {
      return this.$store.state.todos.list
    },
    disabled () {
      return this.itemText.length === 0
    }
  },

  methods: {
    addTodo (todo) {
      if (this.editIndex === false) {
        this.$store.commit('todos/add', this.itemText)
        this.itemText = ''
      } else {
        this.$store.commit('todos/edit', this.itemText, todo)
        this.itemText = ''
      }
    },
    toEdit (todo) {
      this.editIndex = true
      this.itemText = this.todos
    },
    removeTodo (todo) {
      this.$store.commit('todos/remove', todo)
    }
  }
}
</script>

export const state = () => ({
  list: []
})

export const mutations = {
  add (state, text) {
    state.list.push({
      text
    })
  },
  remove (state, todo) {
    state.list.splice(state.list.indexOf(todo), 1)
  },
  edit (state, text, todo) {
    state.list.splice(state.list.indexOf(todo), 1, text)
  }
}

错误

点击编辑按钮，它会是这样的

我自己尝试过的

//methods
 toEdit (todo) {
      this.editIndex = true
      this.itemText = this.todos.text //add
    },
// Cannot read property 'length' of undefined

由于某种原因，我收到了一个以前看不到的错误

Answer 1

您的代码中的属性/数据类型有点混乱。

你在这里访问state.todos.list...

todos () {
    return this.$store.state.todos.list
},

...但是在您的商店中，常量 state 不包括 todos：

export const state = () => ({
  list: []
})

此外，您正在向itemText 写入todos 的内容，它应该是一个字符串，但实际上是一个对象 - 这导致了[object Object] 的输出。

toEdit (todo) {
    this.editIndex = true
    this.itemText = this.todos
},

另外，请查看 Kissu 关于突变的评论。