Question

我对Vue相当陌生，我希望根据组件的给定值显示不同的下拉选项菜单。

我的食品杂货组件：

<template lang="html">
  <div class="">
    <select class="Groceries" name="">
      <option v-for="value in values" v-bind:value="value.id">{{ value }}</option>
    </select>
    </div>
</template>

<script>
export default {
  name: 'Groceries',
  data() {
    return {
      values: {
        fruit: ['apple', 'orange', 'pear'],
        veg: ['carrot', 'pea', 'sprout']
      },
    }
  }
}
</script>

并希望通过以下方式调用另一个组件中的组件：

<Groceries val="fruit"/> 

//should display a dropdown of 'apple', 'orange', 'pear'. or:/

<Flowers val="veg"/>

//should display a dropdown of 'carrot', 'pea', 'sprout'.

此刻，我得到了两个数组的下拉列表。这是我可以通过道具实现的东西吗？任何帮助将不胜感激。

Answer 1

您的Groceries组件应类似于：

<template lang="html">
  <div class="">
    <select class="Groceries" name="">
      <option v-for="val in values" v-bind:value="val">{{ val }}</option>
    </select>
    </div>
</template>

<script>
  export default {
    name: 'Groceries',
    props: ["values"],
    data() {
      return {

      }
    }
  }
</script>

并在父对象中将其称为跟随对象：

<template>
  <div class="">
      <Groceries :values="values.fruit"/>
      <Groceries :values="values.veg"/>
    </div>
</template>

<script>
  import Groceries from './Groceries.vue'
  export default {
    name: 'myapp',
    data() {
      return {
        values: {
          fruit: ['apple', 'orange', 'pear'],
          veg: ['carrot', 'pea', 'sprout']
        },
      }
    },
    components: {
      Groceries
    }
  }
</script>

如何根据给定值在组件中显示不同的下拉选项

1 个答案: