javascript - 如何在 vuetify 对话框中添加谷歌自动完成输入

Question

正如标题所述，我希望在 vue.js 的 vuetify 对话框中添加一个谷歌自动完成功能。我已经通过使用mounted() 函数并附加到页面上的常规输入中成功地添加了自动完成功能（下面的代码）。但是，由于对话框在您单击按钮启动它之前不会呈现，因此使用 this.$refs 并将自动完成附加到这些输入将不起作用。我还尝试在对话框启动后创建一个要附加的函数，但它仍然不起作用。任何见解表示赞赏。

起作用的部分：

mounted() {
   
    console.log(this.$refs)
    //creates google maps automcomplete on the address inputs. Gets the addresses and saves them as well as getting the lat and long from each and saving them
    for (let ref in this.$refs) {
      const options = {
        componentRestrictions: { country: 'us' },
        fields: ['geometry', 'name', 'formatted_address'],
        strictBounds: false,
        types: ['address'],
      }
      const autocomplete = new google.maps.places.Autocomplete(
        this.$refs[ref],
        options
      )
      autocomplete.addListener('place_changed', () => {
        // selected place object, bring up info such as address & geo coords
        const place = autocomplete.getPlace()

        // gets the address and lat/long from the found address and saves them to be used later when actually creating the order
        if (ref == 'pickupAddress') {
          this.pickupAddress = `${place.formatted_address}`
          this.pickupPair = place.geometry.location
        } else {
          this.dropoffAddress = `${place.formatted_address}`
          this.dropoffPair = place.geometry.location
        }
      })
    }
    this.$store.dispatch('getOpenOrders')
  }

对话框

<v-row justify="center">
      <v-dialog v-model="dialog" persistent max-width="600px">
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            color="rgb(216, 52, 125)"
            dark
            v-bind="attrs"
            v-on="on"
            style="margin-top: 10px"
            @click="addRefs"
          >
            Add a leg to an existing order
          </v-btn>
        </template>
        <v-card>
          <v-card-title>
            <span class="headline">Add a leg</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-row>
                <v-col cols="12" sm="6" md="4">
                  <v-text-field
                    label="Order ID*"
                    required
                    v-model="legId"
                    hint="Order ID of the order you want to add a leg to"
                    persistent-hint
                  ></v-text-field>
                </v-col>
                <v-col cols="12" sm="6" md="4">
                  <v-text-field
                    label="Leg Letter (a-z)*"
                    required
                    v-model="legLetter"
                  ></v-text-field>
                </v-col>

                <v-col cols="12">
                  <v-text-field
                    label="Leg Pickup Address*"
                    ref="legPickupAddress"
                    required
                    v-model="legPickup"
                  ></v-text-field>
                </v-col>
                <v-col cols="12">
                  <v-text-field
                    label="Leg Dropoff Address*"
                    ref="legDropoffAddress"
                    required
                    v-model="legDropoff"
                  ></v-text-field>
                </v-col>
              </v-row>
            </v-container>
            <small>*indicates required field</small>
            <v-alert
              class="v-alert"
              v-if="noLegFoundAlert"
              type="error"
              dismissible
              @click="noLegFoundAlert = !noLegFoundAlert"
            >
              No matching leg found, please enter another id or create a leg!
            </v-alert>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn text @click="dialog = false"> Close </v-btn>
            <v-btn text @click="addLeg"> Save </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>

最后是不起作用的 addRefs 函数

async addRefs() {
      const options = {
        componentRestrictions: { country: 'us' },
        fields: ['geometry', 'name', 'formatted_address'],
        strictBounds: false,
        types: ['address'],
      }
      var input = this.$refs['legPickupAddres']  //DOES NOT WORK DOESNT EXIST APPARENTLY!!!!!!
      const autocomplete1 = new google.maps.places.Autocomplete(input, options)
      autocomplete1.addListener('place_changed', () => {
        // selected place object, bring up info such as address & geo coords
        const place = autocomplete.getPlace()
        // gets the address and lat/long from the found address and saves them to be used later when actually creating the order
        this.legPickup = `${place.formatted_address}`
      })
     
    }

标签： javascriptvue.jsvuetify.js