CODEWITHSUNDEEP
javascriptvue.jsvuejs2
dotty
dotty

Reputation: 41533

Turn a prop into a data attribute in vuejs 2

I have a simple component that is rendered by

<House :_people="[{'name': 'Kevin'}, {'name':'Bert'}, {'name': 'Timmy'}]"></House>

And the component looks like

<template>
<div class="house">
    <ul>
        <li v-for="person in people">
            {{ person.name }}
        </li>
    </ul>
    <a href="#add" @click="addMark">Add Mark</a>
</div>
</template>

<script>
export default {
    props: ['_people'],
    data: function(){
        return {
            people: this._people
        }
    },
    methods: {
        addMark: function(){
            this.people.push({
                name: 'Mark'
            });
        }
    },
}

the problem is that I have to pass a json payload to the initial component, but this sets the payload as a prop, not a data attribute. When if i try to manipulate the prop, it's never updated. So I mapped the _people prop to the people attribute.

Is this a good idea? Am i missing something glaringly obvious here?

Upvotes: 0

Views: 909

Answers (2)

Quoc-Anh Nguyen
Quoc-Anh Nguyen

Reputation: 5096

You can use computed property:

export default {
    props: ['_people'],
    data() {
       return {
            added: false
       }
    },
    computed: {
        people() {
            var _arr = this._people.slice();

            return this.added ? _arr : _arr.push({ name: 'Mark' });
        }
    },
    methods: {
        addMark: function(){
            this.added = true
        }
    },
}

Upvotes: 1

Fran&#231;ois Romain
Fran&#231;ois Romain

Reputation: 14393

pass an object as the prop:

people = {
  list: [{'name': 'Kevin'}, {'name':'Bert'}, {'name': 'Timmy'}]
}

<House :_people="people"></House>

and then 

props: ['_people'],
methods: {
  addMark() {
    this._people.list.push({
      name: 'Mark'
    })
  }
}

Upvotes: 1

Related Questions