Q&A
ご回答ありがとうございます！
わからないことがあればすぐ質問してしまうのですが、今後は参考書を読み進めた上で質問しようと思います。
これから始めるVue.jsという参考書で、変更ボタンを押したら値が消去されるコードがあったのですが、HTMLのv-bind:key="item"を消去しても正しく動作します。なぜ今回のコードではv-bind:key="item"が書かれているのかを教えて欲しいです。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8" /> 5<title>Vue.js</title> 6</head> 7<body> 8<div id="app"> 9 <form> 10 <input type="button" value="変更" v-on:click="onclick" /> 11 </form> 12 <ul> 13 <li v-for="item in list" v-bind:key="item">{{ item }}</li> 14 </ul> 15</div> 16<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 17<script src="js/for_change.js"></script> 18</body> 19</html>
Vue
1new Vue({ 2 el: '#app', 3 data: { 4 list: [ '赤パジャマ', '青パジャマ', '黄パジャマ' ] 5 }, 6 methods: { 7 onclick: function() { 8 this.list.shift(); 9 } 10 } 11}); 12
回答2件
0
自己解決
参考書を少し読み進めれば書いてありました、、、。
v-bind:key="item"を付け加えることで、再描画される際に処理対象の要素だけを再描画されるため、負荷が軽くなるとのことでした。
投稿2020/10/11 03:02
総合スコア61
0
動いてはいても、コンソールには警告が出ているはずです。
see: https://jp.vuejs.org/v2/guide/list.html
Vue が各ノードの識別情報を追跡できるヒントを与えるために、...一意な key 属性を全てのアイテムに与える必要があります:
投稿2020/10/11 03:00
編集2020/10/11 03:02
総合スコア4061
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。