Question

我试图在函数中传递v-text-field的值，以便我可以更新数据库，但是我不知道如何，因为我使用v-for。

不知道该怎么办。我无法使用v模型，因为它会在我遍历的跟踪器数组中的所有项目上发生变化。

<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

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

https?://[^p|\r\n]*(?:p(?!roducts)|[^p|\r\n])+(?=\||$)

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文本字段的值

2 个答案: