时间戳

首页 > 解决方案 > 我想使用 Nuxt.js 添加编辑功能

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

问题描述

我想要实现的

我正在创建 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

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

标签： vue.jsnuxt.jsvuetify.jsvuex

解决方案

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

在这里，您正在访问state.todos.list...

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

...但是在您的商店中， conststate不包括todos：

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

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

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

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

推荐阅读