Cannot run equalTo query with input binding.

[tgcsea]

Here's what I'm trying to do:

<template>
  <div>
    <input type="text" v-model="inputText">
    <p>{{ queryResult }}</p>
  </div>
</template>

<script>
import db from './firebasedb.js';
export default {
  name: 'test',
  data() {
    return {
      inputText: '',
    }
  },
  firebase() {
    return {
      queryResult: {
        source: db.ref('customers').orderByChild('firstName').equalTo(this.inputText),
        asObject: true,
      },
    };
  },
}
</script>

And the above code results in following error:
Query.equalTo failed: First argument contains undefined in property 'customers'
If I replace equalTo(this.inputText) with equalTo('John') then queryResult object contains correct data. How can I do this kind of querying?

[posva]

You should probably watch inputText to unbind and bind as it changes.
For the firebase function, you can use a fallback content there: this.inputText || '' but this shouldn't be necessary since inputText should be defined. If you manage to provide a repro for that particular case, I'd look into it

[tgcsea]

Thanks for the help! Here's how I changed the code in case someone finds it useful:

<template>
  <div>
    <form v-on:submit.prevent="onSubmit">
      <input type="text" v-model="inputText">
      <input type="submit" value="Search">
    </form>
    <p>{{ queryResult }}</p>
  </div>
</template>

<script>
import db from './firebasedb.js';
export default {
  name: 'test',
  data() {
    return {
      inputText: '',
      queryResult: {},
    }
  },
  methods: {
    onSubmit() {
      if (this.inputText) {
        this.$bindAsObject(
          'queryResult',
          db.ref('customers').orderByChild('firstName').equalTo(this.inputText)
        );
      }
    },
  },
}
</script>

This code is working as expected, but I have one more question: Do I need to add this.$unbind('queryResult'); before this.$bindAsObject(...) and add some logic for the case where onSubmit method is being called for the first time? Are there any drawbacks with this current solution?

[posva]

Yes, you need to (both questions).
You may be doing too many requests if no throttle is added (https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed)