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>

CodePudding user response：

Vue.set()

As discussed in the comments, Vue.set was able to do it.
See documentation: https://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);