时间戳

首页 > 解决方案 > 如何在模板中获取 vuetify 数字类型 v-text-field 的值

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

问题描述

我正在尝试在函数中传递 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.jsvuextextfieldvuetify.js

解决方案

我所要做的就是在@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>

推荐阅读