CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuetify.js
Fabio Zanchi
Fabio Zanchi

Reputation: 945

VUE / VUETIFY - Auto-adjust height adding or removing items from list component "v-list-tile"

I created a simple Contact list with an input to add the contact items but after I add a few items it's not resizing.

I used this as an example and there is resizing but not in my code: https://v2.vuejs.org/v2/guide/list.html

Could anyone help me with that?

Here is the Codepen:

https://codepen.io/fabiozanchi/pen/qoBpgd

Vue.component('contact-item', {
  template: '\
        <v-list-tile-title>\
          <button @click="$emit(\'remove\')"><v-icon class="remove-email-icon" color="red">remove_circle</v-icon></button>\{{ title }}\
        </v-list-tile-title>\
      ',
  props: ['title']
})

new Vue({
  el: '#contact-list',
  data: {
    newContact: '',
    contacts: [],
    nextContactId: 1
  },
  methods: {
    addNewContact: function() {
      this.contacts.push({
        id: this.nextContactId++,
        title: this.newContact
      })
      this.newContact = ''
    }
  }
})
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/vuetify.min.css" />

<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>

<div id="contact-list">
  <v-app>
    <v-layout row>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-toolbar color="blue" dark>
            <v-toolbar-title class="text-xs-center">Contacts</v-toolbar-title>
          </v-toolbar>
          <v-container>
            <v-text-field v-model="newContact" @keyup.enter="addNewContact" placeholder="Add new email contact email"></v-text-field>
          </v-container>
          <v-divider></v-divider>
          <v-list class="resize-list">
            <v-list-tile>
              <v-list-tile-content>
                <v-list-tile-title is="contact-item" v-for="(contact, index) in contacts" :key="contact.id" :title="contact.title" @remove="contacts.splice(index, 1)">
                </v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </v-list>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

Thank you!

Upvotes: 0

Views: 2889

Answers (1)

Traxo
Traxo

Reputation: 19002

Use v-for on v-list-tile component (see vuetify examples). 

<v-list-tile
    v-for="(contact, index) in contacts"
    :key="contact.id"
>

That will produce multiple lis that you want from your examples (currently you only have one li element in list because of v-for on title, so that's why it's not working properly)

Upvotes: 1

Related Questions