vuetify: 동적 목록을 사용하는 v-chip v-model

vuetify: 동적 목록을 사용하는 v-chip v-model

태그 목록을 표시하기 위한 Vuetify 컴포넌트가 있습니다.

<template>
    <div>
        <v-chip 
            v-for="tag in tags" 
            :key="tag.id" 
            v-model="???"
            @input="onClose(tag)"
            close
        >
            {{tag.name}}
        </v-chip>
    </div>
</template>

<script>
    export default {
        name: 'TagIndex',
        props: ['tags'],

        methods: {
            onClose(tag){
                console.log('close tag')
            }
        }
    }    
</script>

Vuetify 문서에는 다음과 같이 기재되어 있습니다.

폐쇄형 칩은 v-model로 제어할 수 있습니다.

태그 목록이 동적인 경우 각 태그의 모델로 어떤 개체를 지정해야 하는지 알 수 없습니다.

태그 목록을 기반으로 어레이를 생성하려고 했습니다.

data(){
  return {
    clonedTags: this.tags.map((t) => {return true})
  }
}

하지만 실패했다

그v-model이 컴포넌트에서는 태그의 열림/닫힘 상태에 바인딩되므로 부울 값만 사용해야 합니다.여기 바이올린의 예가 있습니다.

---

당신의 경우, 만약 당신이 각 오브젝트를 준다면tags을 배열하다isOpen다음과 같이 사용할 수 있습니다.

<v-chip 
  v-for="tag in tags" 
  :key="tag.id" 
  v-model="tag.isOpen"
  @input="onClose(tag)"
  close
>
  {{tag.name}}
</v-chip>

그러면, 의 가치가tag.isOpen변경사항은 구성요소의 개방/폐쇄 상태에 반영되며, 그 반대도 마찬가지입니다.

여기 바이올린의 예가 있습니다.

언급URL : https://stackoverflow.com/questions/45336188/vuetify-v-chip-v-model-using-dynamic-lists