What is the best way to pass data from a dropdown list to a prop?

Question

I'm attempting to pass the selected value from my dropdown list, to my props, but being new at Vue I'm lost as to how to get this my selected value to pass to my prop, I've attempted many different methods but it remains an empty string. What am I missing here?

        <template>
          <FormLayout>
            <div class="columns">
              <div class="column is-4">
                <FormField :for="ff.slug" />
                <FormField :for="ff.name" />
                <select v-model="selected">
                 <option disabled value="">Please select one</option>
                  <option>A</option>
                  <option>B</option>
                  <option>C</option>
                </select>
               </div> 
    
           export default {
          fullScreen: true,
          name: 'CcRequestForm',
          mixins: [BaseForm],
        
          props: {
             selected: '',

             modelName: {
              default: 'CcRequest',
            }
           },
        
          computed: {
              ...mapGetters(['ccTypesForRequests', 'currentRequesterSlug', 'currentCcRequest']),    ccTypesCollection() {
              return this.ccTypesForRequests.map((x)=>[x.slug, this.t(`cc_types.${x.slug}`)]);
            }
          },

score 1 · Answer 1 · edited Jul 16 '22 at 05:21

There are a few points that you should consider and implement in your code in order to fix your component.

When you're defining props in a child component, you should define its type, using javascript types (String, Number, Boolean, Array, Object). So writing selected: '' is not the correct way. Use selected: String instead. Read the Vue documentation for more detailed information:

Prop Types

Prop definitions
You should know and consider that mutating a prop in the child component is an anti-pattern, as their documentation says:

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

So in your child component: use a computed property as your select box value, and emit an event whenever it changes. And in your parent component: set a function on selectComponent event emitting, and change the value of selected state there. Check the below links for further reading:

One-Way Data Flow

Implicit parent-child communication

Vue 2 - Mutating props vue-warn

I've also implemented the correct code for your better understanding. Open and check the console when you're changing the dropdown list: https://codesandbox.io/s/vue2-v-model-og0fd?file=/src/App.vue

What is the best way to pass data from a dropdown list to a prop?

1 Answers1