【Vue.js】選択した要素を削除したい

Question

Vue.js初学者です。

解決したいこと

・「削除」を押した時、「削除」を押した要素だけを削除したい（現状、どの「削除」をクリックしても、最後から消えていく）
・todoリストを参考にしているため、「todos」などのkeyを使っているが
単純に「ボタンをクリックしたら、フォームの枠がどんどんと増える」という仕様にしたい
（ユーザーが任意に入力するものはなし）
なので、そもそも配列を準備する必要がないのかもしれない

サンプルコード

<template>
  <div class="test">
    <div v-for="(todo, index) in todos" :key="todo" v-bind="todo"
    :class="{'isDelete':index > 0}">
    <span v-if="index > 0" @click="dI(index)">「削除」</span>
    <label>ほげ{{index+1}}</label>
    <input type="radio"/>
    </div>
    <button @click="aI">増やすボタン</button>
  </div>
</template>

<script>

export default {
  name: 'test',
  data() {
    return {
      todos: [''],
    };
  },
  methods: {
    aI() {
      this.todos.push('');
    },
    dI(index) {
      this.todos.splice(index, 1);
    },
  },
};
</script>

補足

＜実装済＞
・ボタンを押したらフォームを追加
・２番目以降は、削除を表示する

＜試みたこと＞
・dI(index) {
this.todos.splice(index, 1);
},で何番目かを取得して、削除出来ないか

よろしくお願いします。

Answer 1

:key="todo" の部分でtodoが全て空文字列なので、要素の区別がついていないんじゃないかなという気がします。
spliceで削除するのは有効なはずです。

Comments

[frtne]

ご回答ありがとうございます！

Answer 2

削除を行い再描画がかかった時に

<label>ほげ{{index+1}}</label>

のindex番号が更新されてしまうので、以下のように

<label>ほげ{{todo.id+1}}</label>

にしてあげればいいのではないでしょうか？

私も初学者なので的外れな事を言っていたらすみません。

Answer 3

otolabさんが記載している通り、:keyが空文字のため、繰り返しの処理の中ですべて同じ""となります。
配列にidを設定するなどして、:keyに指定してみてはいかがでしょうか？

<template>
  <div class="test">
    <div v-for="(todo, index) in todos" :key="todo.id" v-bind="todo"
    :class="{'isDelete':index > 0}">
    <span v-if="index > 0" @click="dI(index)">「削除」</span>
    <label>ほげ{{index+1}}</label>
    <input type="radio"/>
    </div>
    <button @click="aI">増やすボタン</button>
  </div>
</template>

<script>

data() {
 return {
  todos:[
   {id:1,name:''}
  ],
 };
},

methods: {
    aI() {
      let max = this.todos.reduce(function(a,b) {
        return a > b.id ? a : b.id
      },0)

      this.todos.push({
        id:max + 1,
        name:'',
      })
    },

    dI(index) {
      this.todos.splice(index, 1);
    },
}

</script>

Comments

[frtne]

ご回答ありがとうございます。
[code]
<template>
<div class="test">
<div v-for="(todo, index) in todos" :key="todo.id" v-bind="todo"
:class="{'isDelete':index > 0}">
<span v-if="index > 0" @click="dI(index)">「削除」</span>
<label>ほげ{{index+1}}</label>
<input type="radio"/>
</div>
<button @click="aI">増やすボタン</button>
</div>
</template>

<script>

export default {
name: 'test',
data() {
return {
todos: [
{ id: 1, name: '' },
],
};
},

methods: {
aI() {
const max = this.todos.reduce((anc, bnc) => (anc > bnc.id ? anc : bnc.id), 0);

this.todos.push({
id: max + 1,
name: '',
});
},

dI(index) {
this.todos.splice(index, 1);
},
},
};
</script>
[/code]

上記で試してみました（自動補完されている箇所もあり）が、まだ削除したい要素ではなく
新しいもの順に消えて行ってしまいます。。。
何か原因わかりますでしょうか