Vue.js：編集ボタン押下でテキストボックスを表示し上書きを行いたい。

Question

前提・実現したいこと

いつもお世話になっております。
■実現したいこと
・編集ボタンが押下されたら下記画像の「1111」の部分をテキストボックス表示に変更し、「1111」を入力した値で上書きしたいと考えております。
※チェックボックスにチェックが付いていたら編集ボタンを押下してもテキストボックス表示はしない仕様にしたいと考えております。

上記機能の実装方法を考えているのですが実装方法が全く思いつかない状態です。
どなたかご教授お願い致します。
![

該当のソースコード

<template>
  <div id="app">
      <h1>ToDoリスト</h1>
      <input type="text" v-model="textinput" placeholder="タスクを入力">
      <input type="button" v-on:click="insertbutton" value="登録">
      <p class="p-position"><span>{{textinput.length}}</span>文字</p>
      <div class="div-position" v-for="(todo,idx) in todolist" v-bind:key="(todo)">
        <label>
            <input type="checkbox" id="check" v-model="todo.checke">
            {{todo.name}}
            <input type="button" v-on:click="deletebutton(todo)" value="削除">
            <input type="button" v-on:click="changebutton(todo)" value="編集">
        </label>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textinput: '',
      todolist: [],
    };
  },
  methods: {
    insertbutton() {
      if (this.textinput === '') return;
      this.todolist.push({ name: this.textinput, checke: false });
      this.textinput = '';
    },
    deletebutton(todo) {
      if (todo.checke === true) {
        this.todolist = this.todolist.filter( item => item != todo );
      }
    },
    changebutton(todo) {
      if (todo.checke === true)
        this.todolist
    }
  },
};

</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.p-position {
  font-size: 80%;
  margin-top: 0px;
  position: absolute;
  left: 380px;
}
.div-position {
  padding-top: 25px
}

</style>

Answer 1

どっちか好きな方で実装したらいいです。Vue的にはどちらでもいいと思います。

1. 1111の部分をそもそもinputタグで作っておいて、classをバインドすることでCSSを付け替えて入力欄とそうでない場合の見た目と挙動を変える。
2. v-ifまたはv-showを利用してinputとそうでないタグの表示/非表示を切り替える。それぞれ同じ値をバインドしておく。

Comments

[pokemn]

ご回答ありがとうございます。
無事実装できました。