vue　todoリストに編集機能をつけたい

編集ボタンを押したら、items:titleを書き換えられるようにしたいのですが、どうしたらいいのか分かりません。
ご教授頂きたいです。よろしくお願いいたします。

vue
1<template>
2  <div class="card">
3    <input type="text"
4    placeholder="TODOを入力しましょう！"
5    v-model="newItemTitle"
6    v-on:keyup.enter="addTodo">
7    <ul>
8    <li v-for="item in items" :key="item.id">
9      <label>
10        <input type="checkbox" v-model="item.isChecked" v-on:change="saveTodo"> 
11        {{ item.title }}
12        <button v-on:click="deleteTodo()">削除する</button>
13        <button v-on:click="editTodo()">編集する</button>
14      </label>
15    </li>
16  </ul>
17  
18  </div>
19</template>
20
21<script>
22export default {
23  data() {
24    return {
25      items: [
26        { title: 'トマト', isChecked: true },
27        { title: 'スイカ', isChecked: true },
28        { title: 'カボチャ', isChecked: false }
29    ],
30    newItemTitle:''
31    }
32  },
33    methods: {
34      addTodo: function() {
35        this.items.push({
36          title: this.newItemTitle,
37          isChecked: false
38        });
39        this.newItemTitle = '';
40        this.saveTodo();
41      },
42      deleteTodo: function() {
43        this.items = this.items.filter(function (item) {
44          return item.isChecked != true;
45        });
46        this.saveTodo();
47      },
48      editTodo(){
49        
50      },
51      saveTodo: function(){
52        localStorage.setItem('items', JSON.stringify(this.items));
53      },
54      loadTodo: function(){
55        this.items = JSON.parse( localStorage.getItem('items') );
56        if( !this.items ){
57          this.items = [];
58        }
59      }
60    },
61      mounted: function(){
62        this.loadTodo();
63      }
64}
65</script>
66

gentaro

2020/06/04 05:11

編集つっても色々方法があると思いますけど、どういう動きを期待してるんでしょうか。

masaya9460

2020/06/04 05:17

editTodo()が実行されたときにitem.titleをplaceholderで書き換えられるような動きにしたいです。

行動規範の内容に同意します

回答1件

readonly属性使っていいなら

vue
1<template>
2  <div id="app">
3  <div class="card">
4    <input type="text"
5    placeholder="TODOを入力しましょう！"
6    v-model="newItemTitle"
7    v-on:keyup.enter="addTodo">
8    <ul>
9    <li v-for="(item, idx) in items" :key="item.id">
10      <label>
11        <input type="checkbox" v-model="item.isChecked" v-on:change="saveTodo"></input>
12        <input type="text" :readonly="editIndex != idx" v-model="item.title"></input>
13        <button v-on:click="deleteTodo()">削除する</button>
14        <button v-on:click="editTodo(idx)">編集する</button>
15      </label>
16    </li>
17  </ul>
18
19  </div>
20  </div>
21</template>
22
23<script>
24export default {
25  data() {
26    return {
27      items: [
28        { title: 'トマト', isChecked: true },
29        { title: 'スイカ', isChecked: true },
30        { title: 'カボチャ', isChecked: false }
31    ],
32    newItemTitle:'',
33    editIndex: -1,
34    }
35  },
36    methods: {
37      addTodo: function() {
38        this.items.push({
39          title: this.newItemTitle,
40          isChecked: false
41        });
42        this.newItemTitle = '';
43        this.saveTodo();
44      },
45      deleteTodo: function() {
46        this.items = this.items.filter(function (item) {
47          return item.isChecked != true;
48        });
49        this.saveTodo();
50      },
51      editTodo(idx){
52        this.editIndex = this.editIndex >= 0 ? -1 : idx;
53      },
54      saveTodo: function(){
55        localStorage.setItem('items', JSON.stringify(this.items));
56      },
57      loadTodo: function(){
58        this.items = JSON.parse( localStorage.getItem('items') );
59        if( !this.items ){
60          this.items = [];
61        }
62      }
63    },
64      mounted: function(){
65        this.loadTodo();
66      }
67}
68</script>