Блог

Я пытаюсь создать пользовательский селектор, который я буду использовать несколько раз, и я хочу установить prop для функции, которую он должен запускать при выборе. Вот мой код (только соответствующие его части):

Главный селектор:

 <template>
 <div>
    <select name="selector" >
        <option :key="option" v-for="option in options" @change="selection"> {{option}} </option>
    </select>
 </div>
</template>

<script>
export default {
  name: 'CoffeeSelector',
  props: {
    options: Array,
    selection: Function
  },
}
</script>

  

Страница, на которой я ее использую:

 <template>
  <div>
    <custom-selector :options='types' :selection="coucou"> </custom-selector>
  </div>
</template>

<script>
import CustomSelector from './CustomSelector.vue'

export default {
  name: 'Selectors',
  components: {
    CustomSelector
  },
  methods: {
    coucou(){
      console.log("coucou")
    }
  }
}
</script>
  

Когда я делаю это, ничего не происходит при изменении выбора. Есть идеи о том, почему это происходит? Заранее спасибо

Вы можете передавать события родительскому компоненту.

 <template>
 <div>
    <select name="selector" >
        <option :key="option" v-for="option in options" @change="onOptionChange(option)"> {{option}} </option>
    </select>
 </div>
</template>

<script>
export default {
  name: 'CoffeeSelector',
  props: {
    options: Array
  },
  methods: {
    onOptionChange(option) {
      this.$emit('selection', option);
    }
  }
}
</script>
  

Затем вы можете прослушать эти события в родительском компоненте.

 <template>
  <div>
    <custom-selector :options='types' v-on:selection="coucou"> </custom-selector>
  </div>
</template>

<script>
import CustomSelector from './CustomSelector.vue'

export default {
  name: 'Selectors',
  components: {
    CustomSelector
  },
  methods: {
    coucou(option){
      console.log("coucou: "   option)
    }
  }
}
</script>
  

вместо этого попробуйте переместить свой @change в select тег

 <select name="selector" @change="selection">
  <option :key="option" v-for="option in options"> {{option}} </option>
</select>