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

【问题标题】：How to get value of vuetify number type v-text-field in template如何在模板中获取 vuetify 数字类型 v-text-field 的值
【发布时间】：2019-12-21 19:48:22
【问题描述】：

我正在尝试在函数中传递 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 这样的简单值，它会起作用。

【问题讨论】：

标签： vue.js vuex textfield vuetify.js

【解决方案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>

【讨论】：

它不工作。它通过我的方法，并且由于.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 这样的简单值，它可以工作。

【解决方案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>

【讨论】：