8000 $props overrides extended boolean props · Issue #13432 · vuejs/core · GitHub
[go: up one dir, main page]
Skip to content

$props overrides extended boolean props #13432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
platon-rov opened this issue Jun 3, 2025 · 2 comments
Closed

$props overrides extended boolean props #13432

platon-rov opened this issue Jun 3, 2025 · 2 comments

Comments

@platon-rov
Copy link
platon-rov commented Jun 3, 2025 •
edited
Loading

Vue version

3.5.16

Link to minimal reproduction

https://play.vuejs.org/#eNqNU9tu00AQ/ZVhhViQgqOqwENwUlFUCXiACpB4sYRce5xuWe+udtchkeV/Z2ZDUrdNL0/2XM5czpztxQfnslWHYibyUHnlIgSMnVsURrXO+ggfbet++dI59NB424LMpiMfg2Vh8ukWTTgyIrZOlxHJAsjHFabkyqejuJiIGCprGrXMroI1NEjPqEJUBFMa/TcXlTWhEDNIEY6VWtu/X5Iv+g4nO391idWfA/6rsGZfIc49BvQrLMQ+Fku/xLgNn/34imv63wdbW3eash8IfsdgdcczbtNOO1PT2KO8NO3nRKcyy5/hbB3RhN1SPChnDim/EEQoM3bf6tfjHmdvEq4wA7HImEOXBF2a5ZxwVOb6qnHjEPp03HNvXYBhf1wOBfmeD0l3CZHSoooaYQ6S8+UELqzVZPLkBJxDjY0ymAqla6e/xctXVOQhYVweLT7hZgJ9nxoMwzM45crR1uUGVKCt+9TqBCT3kjAD2ZQ6oByGfErwu2K6Jc2nscGgG+JOqk4U/M94MlU1btvR3ZiwkSnvZQpe3ASezCBET1IZHufQLfp+BGVe+PGSUnZPD1avL5SpaennjrsV4vAr5F2yGIgxXKedlYnom7LC0e5Jhula+yFpQEiKIA9/sDTkYkn+XqFnmVPJ4+xtdvRODP8ACEOEBA==

Steps to reproduce

I create Comp with props of type CompProps.

// types.ts
export interface CompProps {
  title?: string;
  bool?: boolean;
}

// Comp.vue
<script setup lang="ts">
import type { CompProps } from './types';

const { title = 'Comp', bool = true } = defineProps<CompProps>();
</script>

<template>
  <h1>Hey, {{title}}! Bool today is: {{bool ? 'true' : 'false'}}</h1>
</template>

I create CompWrapper with props of type CompProps & { description?: string } and use $props in its template to pass props through it.

// CompWrapper.vue
<script setup lang="ts">
import Comp from './Comp.vue';

import { CompProps } from './types';

const { description = 'description'} = defineProps<CompProps & { description?: string}>();
</script>

<template>
  <p>{{description}}</p>
  
  <Comp v-bind="$props" />
</template>

I render App

// App.vue
<script setup>
import CompWrapper from './CompWrapper.vue'
</script>

<template>
  <CompWrapper />
</template>

What is expected?

Hey, Comp! Bool today is: true

title defaulted to Comp, bool defaulted to true

What is actually happening?

I see

Hey, Comp! Bool today is: false

title defaulted to Comp (expected), bool defaulted to false (bug 🐞)

System Info



Any additional comments?


If I don't use $props then bool defaults to true (expected). So it's definitely an issue with $props inself.

      		
    

      
  





        



            
            

              
            

        

      


      
    








      

    



      

  
      



  

  @edison1105





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      

  
  Member


      

  


  
    

  




      


        


  
    

      
          
the $props.bool is false because of


  __name: 'CompWrapper',
  props: {
    title: { type: String, required: false },
    bool: { type: Boolean, required: false },
    description: { type: String, required: false, default: 'description' }
  },


https://vuejs.org/api/component-instance.html#props

      		
    

  





        


            

            
            

              
            

        

      


      

            
  
  

    
  
    
    

  

  

  


    












      

  
            

    







      

  
      



  

  @platon-rov





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      



      

  Author


  


  
    

      

      
            platon-rov
  

      

      

      commented


        Jun 3, 2025


      
  •

  

    
      

        
          edited
          
        
        
      

    
    
      
  
        
      Loading


  
    
  



    


  




      


        


  
    

      
          
Wait, I think it's not quite obvious. Let me explain.


You probably mean't that Boolean Casting thing, okay.


Then why we can default boolean with true without any warnings? So we can use <Comp /> and it will use it's inner default to true, but once we apply $props it inverts anything.


I get that Vue wants to mimic HTML attributes behaviour, but then I expect any kind of restriction to not be able to default boolean props with true in the component.

      		
    

  





        


            

            
            

              
            

        

      


      

            
  
  

    
  
    
    

  

  

  


    
















  
  

    

      

  





  




  
  

              

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment


  



  






  
                  




    

  


      
  

    Assignees
  



        

    No one assigned







      


  


  

    Labels
  



    

    None yet







      

  

    

        

    Projects
  


        




    None yet




  



      


  

    
  

    Milestone
  


      No milestone





    
      
          


  

    

      
        

          
    

    Development
  




            
    
No branches or pull requests







      
    

  




      

    

  
      

  

    

      2 participants
    

    

        
          @edison1105 
        
          @platon-rov 
    

  






    

    




    






  

          

        



    



  





    

  


  


          



    



  

    

    

    





    

    

    

  



0