使用Vue.JS在Vuetify中使用V模型显示来自Firebase的V对话框中的数据

时间:2017-10-21 21:16:39

标签: firebase-realtime-database vue.js vuetify.js

我无法相信它不会解决我的问题,也不会将数据从数据库显示到对话框/任何可以指出问题的人吗?无论如何这是我的代码。唯一的方法是将Firebase实时数据库中的数据显示到V Dialog。

         <template slot="items" scope="{ item }" :prop="item['.key']">
            <td>{{ item.name }}</td>
            <td>
              <div v-if="!item.edit">                          
                <v-btn fab dark slot="activator" v-show="!hidden" small  @click="setupdateProduct(item['.key'])" class="teal lighten-2">
                  <v-icon dark>edit</v-icon>
                </v-btn>
              </div>
              <div v-else>
                <v-fab-transition>
                  <v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition" :overlay=true>
                      <!-- <form @submit.click="editProduct"> -->
                        <v-card>       
                          <v-toolbar dark class="info">
                            <v-btn icon @click.native="dialog = false" dark>
                              <v-icon>arrow_back</v-icon>
                            </v-btn>
                            <v-toolbar-title>Products</v-toolbar-title>
                            <v-spacer></v-spacer>
                            <v-toolbar-items>
                              <v-btn dark  flat type="submit">Save</v-btn>
                            </v-toolbar-items>
                          </v-toolbar>
                          <v-list three-line subheader>
                            <v-subheader>*means required field</v-subheader>
                                <v-card-text>
                                  <v-container fluid>
                                    <v-layout row>
                                      <v-flex xs12 sm6 offset-sm3>
                                        <v-text-field
                                          name="name"
                                          label="Product Title*"
                                          id="name"
                                          v-model="item.name"
                                        ></v-text-field>
                                      </v-flex>
                                    </v-layout>
                                  </v-container>
                                </v-card-text>
                          </v-list>
                        </v-card>
                      <!-- </form> -->
                  </v-dialog>
                </v-fab-transition>
              </div> 
            </td>
        </template>

//在我的方法中

  setupdateProduct(key) {
    productRef.child(key).update({ edit: true })
  }

0 个答案:

没有答案