Vue.js|Twitter 추적 리스트 같은 UI 만들기

트위터의 추적 차트 같은 UI가 필요하기 때문에 메모입니다.공식적으로는 이쪽 정보입니다.
https://vuetifyjs.com/ja/components/lists/#section-30b730f330d730eb306a30a230d030bf30fc30ea30b930c8
다만, 위와 같은 경우 아이콘을 클릭할 수 없고, 클릭 시 버튼 상태 전환(색상 변경 등)이 고려되지 않아 간단하게 맞춤 제작을 시도했다.
우선 전체 코드는 여기에 있습니다.
List.js

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-list subheader>
	  <!-- これは別になくてもいいです -->
          <v-subheader>Recent chat</v-subheader>
          
	  <v-list-item
            v-for="chat in recent"
            :key="chat.title"
          >
            <v-list-item-avatar>
              <v-img
                :alt="`${chat.title} avatar`"
                :src="chat.avatar"
              ></v-img>
            </v-list-item-avatar>

            <v-list-item-content class="text-left">
              <v-list-item-title v-text="chat.title"></v-list-item-title>
            </v-list-item-content>

            <v-list-item-action>
              <v-btn
              v-if="!chat.active"
              @click="chat.active = true"
              text
              icon>
                <v-icon
                color="grey lighten-1">
                mdi-heart-outline
                </v-icon>
              </v-btn>
              <v-btn
              v-else
              @click="chat.active = false"
              text
              icon>
                <v-icon
                color="pink">
                mdi-heart
                </v-icon>
              </v-btn>
            </v-list-item-action>
          </v-list-item>
        </v-list>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>

export default {
  name: 'List',
  data: () => ({
      recent: [
        {
          active: true,
          avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
          title: 'Jason Oner',
        },
        {
          active: true,
          avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
          title: 'Mike Carlson',
        },
        {
          active: false,
          avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
          title: 'Cindy Baker',
        },
        {
          active: false,
          avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
          title: 'Ali Connors',
        },
      ],
    }),
}
</script>

이렇게 된 느낌.

자세한 상황을 좀 보겠습니다.
이것은 줄마다 데이터를 유지한다.active로 하트 컨트롤.
List.js

data: () => ({
      recent: [
        {
          active: true,
          avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
          title: 'Jason Oner',
        },
        {
          active: true,
          avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
          title: 'Mike Carlson',
        },
        {
          active: false,
          avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
          title: 'Cindy Baker',
        },
        {
          active: false,
          avatar: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
          title: 'Ali Connors',
        },
      ],
    }),
}

목록이 여러 개 있습니다. for 회전을 사용하십시오.
나중에active 등을 통해 데이터에 접근할 수 있는 값입니다.
v-list-item-content, v-list-item-avatar, v-list-item-action 등은 내용에 따라 적당한 표기와 기능이 있으니 공식 일람표를 보면서 대응하는 라벨을 사용하세요.작은 맞춤 제작을 하고 싶다면 그걸 보면서 조절하는 느낌을 보고 싶어요.
List.js

<v-list-item
 v-for="chat in recent"
 :key="chat.title"
>

이것은 실행 가능한 내용이다.v-if에서 채팅합니다.active의 값에 따라 아이콘의 표시를 전환합니다.
mudi-heart-outline을 사용하면 화이트 컬러를 제거할 수 있어 편리한 느낌을 줄 수 있어요.
List.js

<v-list-item-action>
	<v-btn
	v-if="!chat.active"
	@click="chat.active = true"
	text
	icon>
		<v-icon
		color="grey lighten-1">
		mdi-heart-outline
		</v-icon>
	</v-btn>
	<v-btn
	v-else
	@click="chat.active = false"
	text
	icon>
		<v-icon
		color="pink">
		mdi-heart
		</v-icon>
	</v-btn>
</v-list-item-action>

그리고 채팅.active의 값을 누르면 이벤트에서 진실, 가짜로 바뀌면 하트 아이콘을 바꿀 수 있습니다.
속성에 관해서는 text에서 단추식 디자인에서 아이콘만 디자인으로 변경할 수 있습니다.(보통 버튼을 사용하면 텍스트 링크가 됩니다.)
또 아이콘을 눌렀을 때 효과가 둥글어진다.
List.js

<v-btn
v-if="!chat.active"
@click="chat.active = true"
text
icon>
	<v-icon
	color="grey lighten-1">
	mdi-heart-outline
        </v-icon>
</v-btn>

그나저나 v-icon은 여기서 찾습니다. 비닐봉지에 기재하면 사용할 수 있습니다.
https://materialdesignicons.com/