如何在模板中获取 vuetify 数字类型 v-text-field 的值

Question

我试图在函数中传递 v-text-field 的值，这样我就可以更新数据库，但我不知道怎么做，因为我正在使用 v-for。

不知道要尝试什么。我不能使用 v-model，因为它会改变我循环遍历的跟踪器数组中的所有项目。

<v-card v-for="track in tracker" :key="track.title" min-width="600" tile class="pa-3 mb-2" dark>
          <v-card-title style="background-color: #2f2f2f">
            <h3 class="white--text headline">{{ track.title }}</h3>
          </v-card-title>
          <v-card-actions>
            <v-layout row wrap>
              <v-flex xs5>
                <v-text-field min="0" step="1" type="number" label="Season" :value="track.season"></v-text-field>
              </v-flex>
              <v-spacer></v-spacer>
              <v-flex xs5>
                <v-text-field min="0" step="1" type="number" label="Episode" :value="track.episode"></v-text-field>
              </v-flex>
            </v-layout>
          </v-card-actions>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-3" depressed @click="updateTrack({ title: track.title, season: 2, episode: 2})" class="mr-3">update</v-btn>
            <v-btn color="primary" depressed @click="deleteTrack(track.title)">delete</v-btn>
          </v-card-actions>
        </v-card>

在显示第 2 季和第 2 集的地方，这是我要传递文本字段值的地方。

它不起作用。它通过我的方法，作为 .then 的结果，它控制台记录我更新成功。我会提供updateTrack方法：

updateTrack (payload) {
    db.collection('users').doc(this.userId).collection('tracker').doc(payload.title).update({
       season: payload.season,
       episode: payload.episode
    })
    .then(() => console.log('updated track'))
 }

如果我将方法或模板中的值更改为像 2 这样的简单值，它会起作用。

Answer 1

就像绑定标题一样，您可以绑定其他标题：

<v-btn color="green darken-3" depressed @click="updateTrack({ title: track.title, season: track.season, episode: track.episode})" class="mr-3">update</v-btn>

Answer 2

我所要做的就是在 @change 事件的 v-text-field 中添加下一行代码：

track.season = $event

我所做的就是在每次输入事件发生变化时，我都将事件有效负载分配给 track.season。我对剧集所做的一切都是一样的：

track.episode = $event

文本字段现在看起来像这样：

<v-text-field min="0" step="1" type="number" label="Season" :value="track.season" @change="track.season = $event"></v-text-field>

如何在模板中获取 vuetify 数字类型 v-text-field 的值

How to get value of vuetify number type v-text-field in template

textfield

vue.js

vuex

vuetify.js