VUE / VUETIFY - 自动调整高度从列表组件“v-list-tile”中添加或删除项目答案

【问题标题】：VUE / VUETIFY - Auto-adjust height adding or removing items from list component "v-list-tile"VUE / VUETIFY - 自动调整高度从列表组件“v-list-tile”中添加或删除项目
【发布时间】：2018-08-17 13:09:41
【问题描述】：

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

我以此为例进行了调整，但我的代码中没有： https://vuejs.org/v2/guide/list.html

谁能帮我解决这个问题？

这里是 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/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>

谢谢！

【问题讨论】：

也不适用于初始联系人列表：codepen.io/connexo/pen/wmvyLZ
对不起，我的解释可能有误。是的，即使在初始状态下，高度也不会改变添加或删除。你知道我怎么能改变它吗？ Tks
在您的问题中，它显示为 “如果我将项目手动放在数据上：contacts[] 它正在工作，但通过输入添加它不是。” 这是不正确.
好的，谢谢你告诉我。只是在我的问题上改变了它..
我解决了临时更改 Vuetify 类的问题，但它只是硬编码：.list__tile{ height: auto}

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案1】：

在v-list-tile 组件上使用v-for（参见vuetify examples）。

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

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

【讨论】：