0

I'm trying to make an autocomplete dropdown menu in vue and can't get the api response to render on the page. I'm making an api call on every keystroke in the input. You can see in the handleOnChange method that I'm trying to set the response to the results variable that is binding to the list above.

When I console log the results right after I make the api call AND set it to the data binding variable it logs as if everything is working fine. However, it does not render the actual data on the screen.

Here is my code

<template>
  <div>
    <input type="text" value="" v-model="address" placeholder="Start typing an address..." @input="methods.handleOnChange(address)"/>
    <ul v-if="results.length !== 0">
      <li v-for="result in results">
        {{ result.streetLine  || ""}}
      </li>
    </ul>
    <p v-model="results">
      {{results}}
    </p>
  </div>
</template>

<script>
const SmartyStreetsSDK = require("smartystreets-javascript-sdk");
const SmartyStreetsCore = SmartyStreetsSDK.core;
const Lookup = SmartyStreetsSDK.usAutocompletePro.Lookup;
const credentials = new SmartyStreetsCore.SharedCredentials([website-key]);
const clientBuilder = new SmartyStreetsCore.ClientBuilder(credentials).withLicenses(["us-autocomplete-pro-cloud"]).withBaseUrl("https://us-autocomplete-pro.api.smartystreets.me/lookup");
const client = clientBuilder.buildUsAutocompleteProClient();

export default {
  name: 'Autocomplete',
  data () {
    return {
      address: "",
      results: [{streetLine: "testing"}],
      methods: {
        handleOnChange: function(address) {
          //TODO: need to be able to access "results" from in here
          console.log("this: ", this);
          if (address) {
            const lookup = new Lookup(address);

            client.send(lookup).then((response) => {
              console.log(response.result);
              this.results = response.result;
              console.log("databinding: ", this.results);
            }).catch(console.log)
          }
        }
      }
    }
  }
}
</script>
3
  • You may need to use Vue.set, this might help. Commented Nov 30, 2021 at 17:34
  • I'm not sure how to use that in this scenario. It looks like Vue.set allows you to add or replace an item in array similar to Array.push(). I'm trying to assign the whole response to the results variable. Is that possible with Vue.set? Commented Nov 30, 2021 at 18:56
  • I got it to work. I used Vue.set but had to change the results value to {data: []} and then used Vue.set like this Vue.set(results, "data", response.result) Commented Nov 30, 2021 at 21:56

1 Answer 1

1

Vue.set()

As discussed in the comments, Vue.set was able to do it.
See documentation: https://v2.vuejs.org/v2/api/#Vue-set

Arguments are:

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

It replaces the value at target[propertyName/index] with value and forces reactivity on the value(s).

In your case it should be this instead of this.results = response.result;:

Vue.set(this, "results", response.result);
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.