CODEWITHSUNDEEP
javascripthtmlvue.jsvue-props
OpOp_1
OpOp_1

Reputation: 91

Can you help me to fix props in vue?

I recently started using vue, the code in App.vue is

In line two of the above code I passed a string which is hello as an attribute which get captured in below code App.vue:

  <div class = "container">
    <Header title="Hello"> </Header>
  </div>
</template>

<script>

import Header from './components/Header'
export default {
  name: 'App',
  components: {
    Header,
  }
}
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Poppins', sans-serif;
}
.container {
  max-width: 500px;
  margin: 30px auto;
  overflow: auto;
  min-height: 300px;
  border: 1px solid steelblue;
  padding: 30px;
  border-radius: 5px;
}
.btn {
  display: inline-block;
  background: #000;
  color: #fff;
  border: none;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-size: 15px;
  font-family: inherit;
}
.btn:focus {
  outline: none;
}
.btn:active {
  transform: scale(0.98);
}
.btn-block {
  display: block;
  width: 100%;
}
</style>

Header.vue:

    <header>
        <h1>  XYZ {{ title }} </h1>
        
    </header>
</template>


<script>
    export default{
        name: "Header",
        props: {
            title: {
                type: "string"
            }
        }
    }
</script>

<style scoped>
    header{
        display: flex;
        justify-content: space-between;
        align-items: centre;

    }
</style>

Normally the expected output is enter image description here

But I get a blank page.

I get the output as shown in picture1 when the props property in 2nd code is as props: ['title']

But I get 2nd picture when props in code 2 is as shown above(Header.vue). Why is it?

Upvotes: 0

Views: 266

Answers (1)

Shreevardhan
Shreevardhan

Reputation: 12641

Various ways to define a prop in Vue, this should help https://v2.vuejs.org/v2/api/#props

// Specify only the prop name
props: ['title', ...]

// Prop name and type in object format
props: { title: String, ... }

// Prop type with default value and other metadata
props: { title: { type: String, default: '' }, ...}

Upvotes: 2

Related Questions