在 md-autocomplete 中仅显示数组对象的一个​​属性：md-options

Question

我对使用 Vuejs 还是个新手。我安装了 vue material，目前正在尝试 md-autocomplete 组件。

我脚本中的数据如下所示：

selectedFruit: null,
fruits: [ 
          {name: "Orange", available: 
           "5", price: ".0" },
          {name: "Apple", available: 
           "17", price: ".56" },
          {name: "Kiwi", available: 
           "1", price: ".30" }
        ]

我想做的事情：

• in :md-options in <md-autocomplete>,我只想显示每个水果name

• 在 separate readonly md-input 上，我只想显示自动完成表格中所选水果的 价格；以及另一个只读 md-input 上的可用数量。

我不想使用 md-select 因为我希望它像搜索栏一样工作

有解决办法吗？

Answer 1

你可以试试这个:

<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: ".0" },
      { name: "Apple", available: "17", price: ".56" },
      { name: "Kiwi", available: "1", price: ".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>

工作演示：codesandbox