Question

我正在使用搜索栏列出要选择的人员列表，以查找人员姓名。我正在使用计算和过滤器搜索列表。但是我的清单上有奇怪的行为。我不知道会发生什么请检查上面的代码笔链接。尝试搜索，然后删除搜索。

https://codepen.io/rahmatfajar15/pen/OqPqRy?editors=1010

模板：

<v-layout column fill-height>
  <v-flex> 
    <v-text-field
      v-model="pattern"
      box
      hide-details
      label="Cari Peserta..."
      prepend-inner-icon="search"
      clear-icon="close"
      clearable
    />
    </v-flex>

    <v-layout column>
      <div
        v-for="item in filteredPeserta"
      >
        <v-layout row class="text-xs-left">
          <div class="xs2 justify-center align-center">
            <v-checkbox
              height="16"
              v-model="tempPeserta"
              :value="item.id"
            />
          </div>
          <v-layout xs10 column justify-center>
            <pre class="body-2">{{ item.name }}</pre>
          </v-layout>
        </v-layout>
      </div>
    </v-layout>
  </v-layout>

脚本：

new Vue({
  el: '#app',
  data: () => ({
    pattern: '',
    tempPeserta: [],
    listPeserta: [
      {
        id: '1',
        name: 'Agung'
      },
      {
        id: '2',
        name: 'Bucin'
      },
      {
        id: '3',
        name: 'Chandra'
      },
      {
        id: '4',
        name: 'Dedek'
      },
      {
        id: '5',
        name: 'Enok'
      },
      {
        id: '6',
        name: 'Fajar'
      },
      {
        id: '7',
        name: 'Galih'
      },
      {
        id: '8',
        name: 'Hayo'
      },
      {
        id: '9',
        name: 'Ilsa'
      },
    ]
  }),
  computed: {
    filteredPeserta () {
      return this.listPeserta.filter(item => {
        return item.name.toLowerCase().indexOf(this.pattern.toLowerCase()) > -1
      })
    }

  }
})

Answer 1

使用key时需要添加v-for，因为Vue将重用列表组件（document）

   <div
           v-for="item in filteredPeserta"
           :key="item.id"
           >
      ....
   </div>

Vuetify，带有搜索字段的v-for复选框。复选框上的行为异常

1 个答案: