Question

我正在尝试为遇到的D＆D和怪物建立very simple DM screen。

我想做的是建立一种添加相遇的方法，然后设置怪物的怪物，其怪物的属性在添加时会自动滚动。

我有两个组件，encounter和monster，还有一个在（monster_data）中设置了怪物数据的JSON对象。想法是用户单击“添加怪物”，然后选择要添加的怪物，然后统计数据将被汇总。

我正在努力理解同时拥有道具和数据的区别（坦率地说，是要点）。

我已经阅读了几次文档，据我所知，道具是父母（en）将数据传递给孩子（怪兽）的一种方式，因此，如果我将一个新的怪兽推入the中，呈现我传递给它的属性。但是我不能更改这些属性，如果我想设置该怪物是哪种类型的怪物，我将无法通过道具做到这一点。

数据只是与组件相关的任意值。在文档的示例中，按钮上的计数器没有作为属性传递。但是可以通过功能进行操作并显示。

我的问题是，我应该添加怪物/遭遇作为数据而不是道具吗？我真的在这个概念上挣扎，如果我的方法完全错误，我可能只是放弃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);
    }
});

Vue.js组件中的道具和数据

1 个答案: