title: I want to add editing functions using Nuxt.js
body: <h1 id="what-i-want-to-come-true-wb7c">What I want to come true</h1>
  <p>I am creating TodoLists.
  I tried to implement the following editing features, but it didn't work and I'm having trouble.</p>
  <ol>
  <li>Click the edit button to display the edit text in the input field <br></li>
  <li>If you click the save button after entering the changes in the input field, the changes will be reflected in the first position.</li>
  </ol>
  <br>
  <h1 id="code-kdqj">Code</h1>
  <pre><code>      &lt;v-row v-for=&quot;(todo,index) in todos&quot; :key=&quot;index&quot;&gt;
          &lt;v-text-field
            filled
            readonly
            :value=&quot;todo.text&quot;
            class=&quot;ma-3&quot;
            auto-grow
          /&gt;
          &lt;v-menu
            top
            rounded
          &gt;
            &lt;template #activator=&quot;{ on, attrs }&quot;&gt;
              &lt;v-btn
                v-bind=&quot;attrs&quot;
                icon
                class=&quot;mt-6&quot;
                v-on=&quot;on&quot;
              &gt;
                &lt;v-icon&gt;
                  mdi-dots-vertical
                &lt;/v-icon&gt;
              &lt;/v-btn&gt;
            &lt;/template&gt;
            &lt;v-list&gt;
              &lt;v-list-item
                link
              &gt;
                &lt;v-list-item-title @click=&quot;toEdit(todos)&quot;&gt;
                  &lt;v-icon&gt;mdi-pencil&lt;/v-icon&gt;
                  Edit
                &lt;/v-list-item-title&gt;
              &lt;/v-list-item&gt;
            &lt;/v-list&gt;
            &lt;v-list&gt;
              &lt;v-list-item
                link
              &gt;
                &lt;v-list-item-title @click=&quot;removeTodo(todo)&quot;&gt;
                  &lt;v-icon&gt;mdi-delete&lt;/v-icon&gt;
                  Delete
                &lt;/v-list-item-title&gt;
              &lt;/v-list-item&gt;
            &lt;/v-list&gt;
          &lt;/v-menu&gt;
        &lt;/v-row&gt;
  
        &lt;v-text-field
          v-model=&quot;itemText&quot;
          filled
          color=&quot;pink lighten-3&quot;
          auto-grow
          @keyup.enter=&quot;addTodo&quot;
        /&gt;
        &lt;v-btn
          :disabled=&quot;disabled&quot;
          @click=&quot;addTodo&quot;
        &gt;
          Save
        &lt;/v-btn&gt;
  
  
  </code></pre>
  <pre><code>  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)
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <pre><code>export const state = () =&gt; ({
    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)
    }
  }
  
  </code></pre>
  <h1 id="error-tjkh">Error</h1>
  <p>Click the edit button and it will look like this
  <a href="https://i.stack.imgur.com/oASZe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oASZe.png" alt="enter image description here" /></a></p>
  <h1 id="what-i-tried-myself-e6tf">What I tried myself</h1>
  <pre><code>//methods
   toEdit (todo) {
        this.editIndex = true
        this.itemText = this.todos.text //add
      },
  // Cannot read property 'length' of undefined
  </code></pre>
  <p>For some reason I get an error that I couldn't see before</p>