Overriding props before displaying

2
votes

In Vue, is there a way to override/manipulate the props data before displaying it in the view by setting a method, or is there an switch or if which I can use inside the component template?

So basically, if the props is "hello", I want to display it like "Hello World."

What is the proper way of achieving this in vue?

1
vue.jsvuejs2vue-component

1 Answers

4
votes

Use a computed property.

Vue.component("hello", {
  props:["msg"],
  template: `<div>{{greeting}}</div>`,
  computed:{
    greeting(){
      return this.msg + " world!"
    }
  }
})

Here is an example.

Vue.component("hello", {
  props: ["msg"],
  template: `<div>{{greeting}}</div>`,
  computed: {
    greeting() {
      return this.msg + " world!"
    }
  }
})

new Vue({
  el: "#app"
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <hello :msg="'Hello'"></hello>
</div>