[Vuejs]-Is it possible to create a search function with a v-select alongside user input with vuejs

0๐Ÿ‘

โœ…

I have figured out how to solve this. All i needed was a variable that stores the value of the dropdown and if that value matches the dropdowns value then I can use it to search for the data

//This is the dropdown search function

//The search key is a variable that will store the value of the dropdown hence 'e'

selection: [
        {
          name: t("searchPage.meterNumber"),
          value: "meterNumber"
        },
        {
          name: t("searchPage.account"),
          value: "account"
        },
        {
          name: t("searchPage.billingArea"),
          value: "billingArea"
        }
      ],

searchByDropdown(e) {
      debugger;
      this.searchKey = e;
      console.log(e);
    },

if (searchInput != "" && this.searchKey == "meterNumber") {
              this.$services.accountService
                .accountSearchMultiple({
                  organisationID: 0,
                  meterNumber: searchInput,
                  n: 100
                })
                .then(response => {
                  this.treeData = response.data.treeItems;
                  this.itemData = response.data.dataItems;
                  this.revealTree = false;
                  this.snackbar = {
                    message: "Your search is successful",
                    color: "success",
                    show: true
                  };
                })
                .catch(() => {
                  this.revealTree = true;
                  this.snackbar = {
                    message: "Invalid Search",
                    color: "error",
                    show: true
                  };
                });
            }

1๐Ÿ‘

vuetify has its own built-in component named "v-autocomplete". its exactly like v-select and a searchbar at the top enabling user to search through Items to find the most closest item to the searched text.

๐Ÿ‘คAleM

Leave a comment