Tengo un elemento de selección con opciones, que recorre una serie de objetos ( servicios ).
<select placeholder="Vælg ydelse"> <option v-for="service in services" :key="service.id"> {{service.name}} </option> </select>En mi objeto de datos, tengo
chosenService: { id: 42, name: "some service", group: { id: 2, name: "some group within the service", }, additions: [], classSignupMoreActive: false, },Que me gustaría recuperar una vez que se cambie la selección.
Finalmente, estoy enviando la matriz de servicios desde el padre, ya que todo esto sucede en un componente. No estoy seguro de si esta es la forma más correcta de hacerlo.
Como esto:
<Modal :show="showModal" @close="showModal = false" title="Modal Title" :services="this.services" > </Modal>Puede usar v-model y pasar el objeto a :value de la opción:
new Vue({ el: "#demo", data() { return { services: [{id: 42, name: "some service", group: {id: 2, name: "some group within the service",}, additions: [], classSignupMoreActive: false,}, {id: 43, name: "some other service", group: {id: 2, name: "some group within the service",}, additions: [], classSignupMoreActive: false,}], chosenService: {}, } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <select v-model="chosenService" placeholder="Vælg ydelse"> <option v-for="service in services" :key="service.id" :value="service"> {{service.name}} </option> </select> chosenService = {{ chosenService }} </div>