Реквизиты и данные в компонентах Vue.js

Question

Я пытаюсь создать очень простой экран DM для столкновений и монстров для D & D.

Я пытаюсь создать способ добавить встречу,а затем настроить монстров, чья статистика будет автоматически прокручиваться при добавлении их.

У меня есть два компонента, encounter и monster, и объект JSON с данными монстра, установленными в (monster_data).Идея заключается в том, что пользователь нажимает «Добавить монстра», затем выбирает монстра, которого нужно добавить, и статистика будет добавлена.

Я изо всех сил пытаюсь понять разницу (и, прямо скажем, в этом суть) наличия как реквизита, так и данных.

Я прочитал документацию несколько раз, и, насколько я понимаю, опора - это способ для родителя (встречи) передать данные ребенку (монстру), поэтому, если я толкаю нового монстра ввстреча это передает свойства, которые я передал ему.Но я не могу изменить эти свойства, если я хочу установить, каким монстром был этот монстр, я не могу сделать это с помощью реквизита.

Данные - это просто произвольные значения, связанные с компонентом.В примерах из документации счетчик на кнопке не передается как свойство.Но можно манипулировать с помощью функций и отображать.

Мой вопрос заключается в том, должен ли я добавлять монстров / встреч в качестве данных, а не реквизита, и если да, то как?Я действительно борюсь с этой концепцией, и если мой подход полностью неверен, я, вероятно, просто собираюсь отказаться от Vue и вернуться к манипулированию DOM.

Как и было предложено сократить JSFiddle измой кодПроблема в том, что я хочу передать значение, выбранное в диалоге редактирования, монстру.

Answer 1

Как я понимаю в вашем случае использования, вот простой пример, который может помочь. 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);
    }
});