javascript - VUE/VUETIFY - 自动调整高度，从列表组件中添加或删除项目 "v-list-tile"

Question

我创建了一个简单的联系人列表，其中包含用于添加联系人项目的输入，但在添加一些项目后，它没有调整大小。

我以此为例，可以调整大小，但在我的代码中没有: https://v2.vuejs.org/v2/guide/list.html

有人可以帮我吗？

这是代码笔:

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/vuetify@1.0.5/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/vuetify@1.0.5/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>

谢谢!

Answer 1

在 v-list-tile 组件上使用 v-for(请参阅 vuetify examples )。

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

这将从示例中生成您想要的多个 li (目前，由于标题上有 v-for，列表中只有一个 li 元素，所以这就是为什么它无法正常工作)