text リストデータ

Posted 2021-04-29

リストデータはオブジェクトを要素にした配列にしたほうがいい。
ユニークなキーで取り出せるから？
例えば一番を上を削除すると全て順番が変わって全ての中身が変更されたと認識してしまうから。



[
  { id:1, name: 'スライム', hp:8 },
	{ id:2, name: 'ドラゴン', hp:255 },
	{ id:3, name: 'ベヒーモス', hp:800 }
]


item変数で受け取れる。

受け取ったitemはインデックスではなく要素そのものを受け取っている。


	<ul>
		<li v-for="item in list" v-bind:key="item.id">ID：{{ item.id }} で{{ item.name }}は HP:{{ item.hp}}</li>
	</ul>
	<ul>
		<li v-for="(item,index) in list">{{item.name}}</li>
	</ul>
	<ul>
		<li v-for="(item,key,index) in list">{{item.name}}</li>
	</ul>


要素にユニークなkey属性を設定することが推奨されている。
特にコンポーネントを使ったリストレンダリングには必須になってくる。
keyを指定しないと要素の文字が変更されたと解釈される。すべての要素が。
指定していると該当の要素が消滅したと認識する。


同じ親要素内でキーの重複があるとえらーになる。v-forなどを使った場合など。

<div id="app4">
<!-- ループ -->
<ul>
	<li v-for="item in list" v-bind:key="item.id">ID：{{ item.id }} で{{ item.name }}は HP:{{ item.hp}}</li>
</ul>
<!-- ループ -->
<ul>
	<li v-for="(item,index) in list">{{item.name}}</li>
</ul>
<!-- ループ -->
<ul>
	<li v-for="(item,key,index) in list">{{item.name}}</li>
</ul>

<!--クラス付与 -->
<ul>
	<li v-for="item in list" v-bind:key="item.id" v-bind:class="{ tsuyoi: item.hp > 300}">
		{{item.id}}{{item.name}}{{item.hp}}
		<span v-if="item.hp > 300">つよい！</span>
	</li>
</ul>
<!-- 100以上のみ -->
<ul>
	<li v-for="item in list" v-bind:key="item.id" v-if="item.hp > 100">
		{{item.name}}{{item.hp}}
	</li>
</ul>
</div>

v-ifで一致したものを表示させることができる。
しかしこのままでは一致件数を表示させることはできない。
算出プロパティを使う。


更新できないものもある
・インデックス数値を使った配列要素の更新
・後から追加されたプロパティの更新

this.list = []　→　すでにあるプロパティの更新はOK
this.list[0].name = 'newitem'　→　すでにあるプロパティの更新はOK
this.list[0] = 'newitem'　→　これは配列要素の更新なのでNG


//配列メソッド
push
pop
shift
unshift
splice
sort
reverse


重要
配列インデックスを使って操作をしてはいけないケースが有る。
ユニークなIDで操作したほうがデータの食い違いが発生しないので安全。



this.$setメソッド
リアクティブにプロパティを追加するのにも使う。




filterメソッド


オプションにデータを持たない v-for
<div v-for="item in 5">{{item}}</div>
<div v-for="item in [1,5,10,15]">{{item}}</div>
//位置文字ずつ取り出す
<div v-for="item in title">{{item}}</div>