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

Question

我想实现的

我正在创建 TodoList。我尝试实现以下编辑功能，但没有用，我遇到了麻烦。

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

代码

      <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

您代码中的 properties/data 类型有点混乱。

您正在访问state.todos.list...

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

...但是在您的商店中，const state 不包括 todos:

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

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

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

此外，请查看 kissu 关于突变的评论。

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

I want to add editing functions using Nuxt.js

vue.js

vuex

nuxt.js

vuetify.js

我想实现的

代码

错误

我自己试过的