Question

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

我用这个作为例子并且调整大小但不在我的代码中： 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>

谢谢！

Answer 1

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

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

这会从您的示例中生成多个li（目前您在列表中只有一个li元素，因为标题为v-for，因此＆＃39; s为什么＆## 39;不能正常工作）

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

1 个答案: