Props and Data in Vue.js components

Question

I'm trying to build a very simple DM screen for encounters and monsters for D&D.

What I'm trying to do is set up a way to add an encounter, and then set up monsters whose stats will automatically get rolled when adding them.

I've got two components, encounter and monster , and an JSON object with the monster data set up in ( monster_data ). The idea being the user clicks "Add Monster" then selects what monster to add and the stats would get rolled.

I'm struggling to understand the difference (and quite frankly the point) of having both props and data.

I've read the documentation several times and from what I can understand a prop is a way for a parent (encounter) to pass data down to the child (monster), therefore if I push a new monster into the encounter it renders the properties I passed to it. But I can't mutate those properties, if I wanted to set what type of monster that monster was I can't do that via the props.

Data is just an arbitrary value related to the component. In the examples in the documentation the counter on the button isn't passed as a property. But can be manipulated through functions and displayed.

My question is should I be adding monsters/encounters as data rather than props and if so how? I'm really struggling with this concept and if my approach is completely wrong I'm probably just going to abandon Vue and go back to DOM manipulation.

As requested a cut down JSFiddle of my code. The issue being I want to pass value selected from the edit dialog to the monster prop.

Answer 1

As I understand about your use case, Here is a simple example may help. JSFiddle

Vue.component('encounter', {
    props: ['encounter'], 
    template: '#encounter-template',
    methods: {
        addMonster: function() {
            var monster = {};
            this.encounter.monsters.push(monster);
        },
        onMonsterUpdate (updatedItem, i) {
            this.encounter.monsters.splice(i, 1, updatedItem);
        }
    }
});

Vue.component('monster', {
    template: '#monster-template',
    props: ['monster'], 
    data: function() {
        var data = {
            dialogVisible: false,
            monsterData: monster_data,
            selectedValue: this.monster.slug
        }

        return data;
    },
    methods: {
        toggleDialog: function() {
            if (this.dialogVisible) {
                this.dialogVisible = false;
            } else {
                this.dialogVisible = true;
            }
        },
        onSelected(e) {
          let selectedMonster = this.monsterData.filter(it => it.slug === e.target.value)[0];
          this.$emit('monsterUpdate', selectedMonster)
        }
    },
    updated: function() {
        console.log(this.monster);
    }
});