Populate VueSimpleSuggest from URL param on page load

Question

I have this VueSimpleSuggest component in my Vue JS app:

<vue-simple-suggest
  class="input-elements"
  v-model="chosen"
  :max-suggestions="0"
  :list="getList"
  :filter-by-query="true"
  ref="suggestComponent"
  v-on:select="updateAppDataOnSelect"
>
</vue-simple-suggest>

I have this in the script section of the vue file:

data() { return { chosen: '' } },

I am trying to pick up the URL parameter fd with the query parameter and assign it so it is effectively the default value for the simple suggest list:

mounted() {
  if ("fd" in this.$route.query) {
    // eslint-disable-next-line no-console
    console.log('fd: ', this.$route.query.fd)
    this.chosen = self.$route.query.fd
  }
},

While the console.log dumps out the value of the fd parameter, the simple suggest input does not show that value.

How do I get the simple suggest to show the value passed in from the URL?

score 0 · Answer 1 · answered Sep 12 '22 at 14:37

Turns out I was using the wrong parent reference. I should have had this instead of self, as demonstrated by the console.log #typo

mounted() {
  if ("fd" in this.$route.query) {
    // eslint-disable-next-line no-console
    console.log('fd: ', this.$route.query.fd)
    this.chosen = this.$route.query.fd
  }
},

Populate VueSimpleSuggest from URL param on page load

1 Answers1