Display only one attribute of arrayed objects in md-autocomplete :md-options

Question

I'm still new to using Vuejs. I installed vue material and I am currently trying the md-autocomplete component.

the data in my script looks something like this:

selectedFruit: null,
fruits: [ 
          {name: "Orange", available: 
           "5", price: "$11.0" },
          {name: "Apple", available: 
           "17", price: "$4.56" },
          {name: "Kiwi", available: 
           "1", price: "$25.30" }
        ]

what i wanted to do:

• in the :md-options in <md-autocomplete>, i want to display only the name of each fruit

• on a separate readonly md-input, i want to display only the price of the selected fruit from the autocomplete form; and the available amount on another readonly md-input.

I do not want to use md-select because I want it to act like a search bar

Is there a work-around for this?

Answer 1

You can try this :

<template>
  <div>
    <md-autocomplete
      v-model="selectedFruit"
      :md-options="fruitOptions"
      @md-changed="getFruitOptions"
      @md-opened="getFruitOptions"
      @md-selected="getSelected"
    >
      <label>Select fruit</label>
    </md-autocomplete>

    <md-field>
      <label>Price :</label>
      <md-input v-model="selectedFruitPrice" readonly></md-input>
    </md-field>

    <md-field>
      <label>Available Amount :</label>
      <md-input v-model="selectedFruitAmount" readonly></md-input>
    </md-field>
  </div>
</template>

<script>
export default {
  name: "autocomplete",
  data: () => ({
    selectedFruit: null,
    fruits: [
      { name: "Orange", available: "5", price: "$11.0" },
      { name: "Apple", available: "17", price: "$4.56" },
      { name: "Kiwi", available: "1", price: "$25.30" },
    ],
    fruitOptions: [],
    selectedFruitPrice: "",
    selectedFruitAmount: "",
  }),
  methods: {
    getFruitOptions(searchTerm) {
      console.log("getCustomers", searchTerm);
      this.fruitOptions = new Promise((resolve) => {
        if (!searchTerm) {
          resolve(this.fruits.map((x) => x.name));
        } else {
          const term = searchTerm.toLowerCase();
          this.fruitOptions = this.fruits
            .filter(({ name }) => {
              return name.toLowerCase().includes(term);
            })
            .map((x) => x.name);
          resolve(this.fruitOptions);
        }
      });
    },

    getSelected() {
      const selectedFruitDetails = this.fruits.find(
        (obj) => obj.name === this.selectedFruit
      );
      this.selectedFruitPrice = selectedFruitDetails.price;
      this.selectedFruitAmount = selectedFruitDetails.available;
    },
  },
};
</script>

Working Demo : codesandbox