I am trying to get an exact match for my drop-down selections. So in this example, if I select 'apple' it runs the query okay but it also returns results for 'pineapple'too. How do I get an exact match only?

I have another function in my app that returns the uniqfruit data.

The drop-down

<select id="fruitselect"
                v-model="fruit"
                class="form-control"
                @change="fruitonChange($event)"
                :disabled="selectDisabledfruit"
              >
                <option disabled value="">Select fruit</option>
                <option v-for="fruit in uniqfruit" :key="fruit" :value="fruit">
                  {{ fruit }}
                </option>
              </select>

The VueJS function

fruitonChange: function (e) {
      var id = e.target.value;
      var fruit = e.target.options[e.target.options.selectedIndex].text;

      if (id === uniqfruit) {
        this.runquery();
      } else {
        e = "!showall";
      }
      console.log("id ", id);

      console.log("fruit ", this.fruit);
      console.log("uniqfruit ", this.uniquefruit);
    },

Console results

id  apple
fruit  apple
uniqfruit  Proxy {0: 'apple', 1: 'banana', 2: 'pineapple', 3: 'kiwi'}