Question

有人知道如何使Vuetify的选择默认为列表中的第一项吗？这是我的代码：

<v-select
:items="props.item.games"
item-text="team_name"
></v-select>

props.item.games是一个看起来像这样的数组：

[ { "gid": "SLRI", "team": "4392", "team_name": "Jason t" }, { "gid": "SOKZ", "team": "7428", "team_name": "jason d" } ]

我要做的就是将默认情况下显示数组中第一项的团队名称

非常感谢您的帮助。

这是当前的样子

这就是我想要的样子

更新：

<v-data-table
    :headers="headers"
    :items="users"
    hide-actions
    class="elevation-1"
>
    <template slot="items" slot-scope="props">
        <td class="">
            <router-link class="pink-text" :to="{ name: 'EditUser', params: {id: props.item.id} }" title="Click to edit">
                {{ props.item.email }}
            </router-link>
        </td>
        <td class="">
            <span v-for="(role, index) in props.item.roles" :key="index">
                <span v-if="index != 0">, </span><span>{{ role }}</span>
            </span>
        </td>
        <td class="img-cell"><div v-if="props.item.url" class="img-container"><img class="avatar" v-bind:src="props.item.url"></div></td>
        <td class="">
            <v-select
            :items="props.item.games"
            item-text="team_name"
            ></v-select>
        </td>
        <td class="action">
            <span class="btn-floating btn-small pink">
                <router-link :to="{ name: 'EditUser', params: {id: props.item.id} }">
                <i class="material-icons edit">edit</i>
                </router-link>
            </span>
        </td>
    </template>
</v-data-table>

更新2：

export default {
    name: 'Teams',
    data() {
        return {
            headers: [
                {
                    text: 'Email',
                    align: 'left',
                    sortable: false,
                    value: 'email',
                    width: '30%'
                },
                { text: 'Roles',  value: 'roles', sortable: false, width: '15%' },
                { text: 'Avatar',  value: 'avatar', sortable: false, width: '15%' },
                { text: 'Games',  value: 'games', sortable: false, width: '25.5%' },
                { text: 'Edit',  value: 'edit', sortable: false, width: '14.5%' }
            ],
            feedback: null,
            users: []
        }
    },
    methods: {

    },
    created(){

        db.collection('users').get().then(users => {
            users.docs.forEach(doc => {
                let data = doc.data()
                data.id = doc.id
                this.users.push(data)
            })
        })
    }

}

Answer 1

这是您如何处理不断变化的数据：

const simulateApi = () => {
  let randomData = [
    ['red', 'green', 'blue'],
    ['orange', 'purple', 'pink'],
    ['turkey', 'ham', 'chicken'],
    ['hello', 'old', 'world'],
    ['thanos', 'did', 'nothing', 'wrong']
  ];
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(
        randomData[Math.floor(Math.random() * randomData.length)]
      );
    }, 30);
  });
};

new Vue({
  el: '#app',
  data: () => ({
    items: [],
    selected: ''
  }),
  created() {
    simulateApi().then(data => {
      this.selected = data[0];
      this.items = data;
    });
  }
});

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@1.5.13/dist/vuetify.min.css'>

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-xl>
      <v-layout wrap align-center>
        <v-flex xs12 sm6 d-flex>
          <v-select v-model="selected" :items="items" label="Standard"></v-select>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vuetify@1.5.13/dist/vuetify.min.js'></script>

注释

您会看到，从我的模拟API中获取数据后，我将选定的对象设置为数组中的第一个对象，然后将所有在items下收到的项目设置为

。

如果您想查看API可以吐出的各种数据变化以确保其动态运行，只需按住Run code snippet！

更新

created(){
  db.collection('users').get().then(users => {
    let userData = users.docs.map(doc => {
      let data = doc.data()
      data.id = doc.id
      data.item.game_value = data.items.games[0];
      return data;
    });
    this.user = userData;
  })
}

然后，您可以为v-select设置:value="props.item.game_value"

Vuetify选择默认值

1 个答案:

注释

更新