VUE - prop binding for "disabled" not working on select field

Question

I am trying to make a drop down "select" field disabled under certain conditions in my app.

I have successfully done this with buttons already using a prop (disableBtn) that i pass up from the root of my app to the button component I made.

I try to do the EXACT same thing on a select component and it refuses to pass the prop (disableOption) back into the child component, even though its passing back many other binded props that work fine and build the options out in the drop down correctly.

I am logging the values on screen right now and can see they are updating in the main app component, but its not passing that back to the child for some reason.

Where am I off here? My understanding is you store the values you want to change in data() in the app.vue, then create a prop for them in the child component and bind them in the HTML. This has been working fine in all my other use cases.

app.vue

<template>
  
  <div class="container">
  <img alt="logo" src="./assets/logo.png">
  <Header title="Provider Manager" :custTZ="custTZ" :shippingState="shippingState" :patientID="patientID" :custName="custFullName" :custEmail="custEmail" :custPhone="custPhone" />
  
  <div v-if="providerVisibility" class="providerInfo">
   
    <Button @btn-click="providerPicked" id="first-avail" text="First Available"  />
    <br />

    <Select @dd-select="providerPickedSelect" :disabled="disableOption" :selectName="selectName" :id="id" :eligibleProviders="eligibleProviders" :labelFor="labelFor" :labelText="labelText"  />
    {{ disableOption }}

  </div>

  <div v-if="providerSelected" >
    <hr>
    <br />
    <h2>Provider: {{ chosenProvider }} </h2>
    <br />
  </div>

  <div v-if="providerSelected" >
    <BookingSlots @selectSlot="removeUnselected" :slots="slots" />
    <br />
    <Button @btn-click="bookMeeting" text="Confirm Request" />
  </div>

  </div>  
 
</template>


<script>
import { ZOHO } from "./assets/ZohoEmbededAppSDK.min.js";
import Header from './components/Header'
import Button from './components/Button'
import BookingSlots from './components/BookingSlots'
import Select from './components/Select'
const axios = require('axios');

export default {
  name: 'App',
  components: {
    Header,
    Button,
    BookingSlots,
    Select
  },
  data() {
    return{
      slots: [],
      providerVisibility: true,
      providerSelected: false,
      currentProvider: 'None Assigned',
      chosenProvider: '',
      custFullName: '',
      custEmail: '',
      custPhone: '',
      shippingState: '',
      patientID: '',
      custTZ: '',
      providerZID: '',
      eligibleProviders: [],
      disableBtn: false,
      disableOption: true,

      
    }
  },
  methods: {
    removeUnselected(id) {
      console.log('id', id)
      this.slots = this.slots.filter((slot) => slot.id === id)
    },
    providerPicked(id) {
      console.log("id" + id)
      console.log("currentProvider",this.currentProvider)
      //Toggle front end visibility
      this.providerSelected = true;
      this.providerVisibility = false;
                  
      if(id === "first-avail"){
          // hit booking engine, get name of first available
          console.log("FIRST AVAIL")
          this.chosenProvider = "Need to Hit Booking App";
      }

      if(id === "current-provider"){
          // hit zoho values and get contact assigned provider
          console.log("CURRENT PROVIDER")
         this.chosenProvider = this.currentProvider;
          
      }

      
    },
    providerPickedSelect(id, selectValue) {
        if(this.id === "provider-select"){
        // Get values from our DB for the provider selected
        console.log("Provider-Select")
        this.providerSelected = true;
        this.providerVisibility = false;
        this.chosenProvider = selectValue;
      }
    },
    bookMeeting() {
      //Book the meeting
      console.log("book meeting called")
    }
  },
  created() {
    
    //Hit zoho and get customer info back
    ZOHO.embeddedApp.on("PageLoad",(data) =>
      {
        console.log(data);
        //Custom Bussiness logic goes here
        let entity = data.Entity;
        let recordID = data.EntityId[0];

      ZOHO.CRM.API.getRecord({Entity:entity,RecordID:recordID})
        .then((data) => {
          console.log(data.data[0])
         
            // Set values scraped from CRM Contact profile
            if(data.data[0].provider !== null && data.data[0].provider !== "None Assigned"  ){
              this.currentProvider = data.data[0].provider.name;
              this.providerZID = data.data[0].provider.id;
            }else{
              //need to disable button if no doc assigned
              this.disableBtn = true;
            }
            
            
            this.custEmail = data.data[0].Email;
            this.custFullName = data.data[0].Full_Name;
            this.custPhone = data.data[0].Phone;
            this.patientID = data.data[0].Patient_ID;
            this.shippingState = data.data[0].Mailing_State;
            this.custTZ = data.data[0].GTM;

           
          // getEligibleProviders(this.shippingState);
          
          var data = JSON.stringify({
            "state":this.shippingState,
          });
        



        axios(config)
        .then((res) => {
          console.log(res.data)

          //this.eligibleProviders = res.data;

        if(this.eligibleProviders && !this.eligibleProviders.length){
          console.log("empty array")
          this.eligibleProviders = [{
                                      first_name: "None Avilable in Svc. State", 
                                      last_name: ""
                                    }
                                   ];
          this.disableOption = true;

          }else{
            console.log("full array")
            
          }

          console.log(this.eligibleProviders)
          })
        .catch((e) => {
          console.log(e);
        });


        });

      });
      
      ZOHO.embeddedApp.init();


      this.slots = [
        {
          id: 1,
          text: 'Time Slot 1',
          providerFname: 'James',
          providerLname: "Appleton"
        },
        {
          id: 2,
          text: 'Time Slot 2',
          providerFname: 'James',
          providerLname: "Johnson"
        }
      ];
      this.selectName = "provider-select";
      this.id = "provider-select";
      this.labelFor = "provider-select";
      this.labelText = "Choose a Provider: ";
    

  }
  
}
</script>

select.vue

<template>
    
     <br />
    <label :for="labelFor">{{ labelText }} {{ disableOption }}</label>
    
    <select  v-on:change="onSelect($event, id)" class="select" :name="selectName" :id="id" :disabled="disableOption" >
 
      <option :value="'none'" selected disabled hidden >Select One</option>

      <option :key="provider.id" v-for="provider in eligibleProviders" :value="provider.first_name + ' ' +  provider.last_name" >{{ provider.first_name +" "+ provider.last_name }}</option>
 
    </select>
    <br /><br />

</template>


<script>

export default {
    name: 'Select',
    props: {
        selectValue: String,
        selectName: String,
        id: String,
        labelFor: String,
        labelText: String,
        eligibleProviders: Array,
        disableOption: Boolean,

    },
    methods: {
        onSelect($event, id) {
            console.log($event.target.value)
            this.$emit('dd-select', id, $event.target.value);
            }
        },
        emits: ['dd-select']
    }
 

</script>

button.vue

<template>
    <button @click="onClick(id)" class="btn" :id="id" :disabled="disableBtn" >{{ text }}</button>
</template>


<script>

export default {
    name: 'Button',
    props: {
        text: String,
        id: String,
        disableBtn: Boolean,

    },
    methods: {
        onClick(id) {
            this.$emit('btn-click', id);
            
            }
        }
    }
 

</script>

Answer 1

in select.vue , the props says it wants "disableOption", but you're passing disabled="disableOption"

so you can try updating app.vue with:

<Select
  @dd-select="providerPickedSelect"
  :disable-option="disableOption"
  :select-name="selectName"
  :id="id"
  :eligible-providers="eligibleProviders"
  :label-for="labelFor"
  :label-text="labelText"
/>