Question

我正在尝试创建一种基本形式，一旦提交输入，它将数据发送给父级，然后以卡片的形式呈现在列表中。文档一直指向我使用事件总线，但是对于这样一个简单的任务，这一切似乎都太过精心设计。更不用说它不起作用的xD。我在正确的轨道上吗？还是错过了整个主意？

数据似乎在提交时正在更新，但是我没有看到卡片渲染。我也看到跟随错误， Property or method "initiativeList" is not defined on the instance but referenced during render.

但是，我确实注意到渲染中的变化特别奇怪。而不是在EncounterList.js中渲染子级，而是将子级的属性合并到父级中。

非常感谢您的帮助。

EncounterDashboard.js

<template>
  <div>
    <NewCharacterForm @add-char="addChar" />
    <EncounterList v-bind="encounterList" @add-char="addChar" />
  </div>
</template>

<script>
import Character from "../classes/Encounter";
import NewCharacterForm from "./NewCharacterForm/NewCharacterForm.vue";
import EncounterList from "./EncounterList/EncounterList";
import EventBus from "./EventBus.js";

export default {
  name: "EncounterDashboard",
  components: { NewCharacterForm, EncounterList },
  data() {
    return {
      newChar: {},
      encounterList: []
    };
  },
  methods: {
    addChar(newChar) {
      this.newChar = newChar;
      this.encounterList.push(newChar);
      EventBus.$emit("add-to-list", this.encounterList);
    }
  }
};
</script>

NewCharacterForm.js

<template>
  <div class="new-char-wrapper">
    <form class="char-form" ref="form" v-on:submit.prevent="handleSubmit">
      <NewCharInput class="name-input" label="NAME" name="name" v-model="name" />
      <div class="stat-wrapper">
        <NewCharInput
          class="init-input"
          label="INITIATIVE"
          name="initiative"
          v-model="initiative"
          type="number"
        />
        <NewCharInput class="hp-input" label="HP" name="hp" v-model="hp" type="number" />
      </div>
      <div class="submit-row">
        <button class="submit">SUBMIT</button>
      </div>
    </form>
  </div>
</template>
<script>
import NewCharInput from "./NewCharInput";
import Character from "../../classes/Character";
import { uuid } from "vue-uuid";

export default {
  name: "NewCharacterForm",
  components: { NewCharInput },
  data() {
    return {
      name: "",
      initiative: "",
      hp: 0
    };
  },
  props: ["addChar"],
  methods: {
    handleSubmit() {
      const charName = this.$refs.form.name.value;
      const charInitiative = this.$refs.form.initiative.value;
      const charHp = this.$refs.form.hp.value;
      const charId = this.$uuid.v4();
      const newChar = new Character(charName, charInitiative, charId, charHp);
      this.$emit("add-char", newChar);
    }
  }
};
</script>

EncounterList.js

<template>
  <div class="encounter-list">
    <div class="header-row">
      <h2 class="header col-init">INIT</h2>
      <h2 class="header col-name">NAME</h2>
      <h2 class="header col-hp">HP</h2>
    </div>
    <EncounterCard
      v-for="character in initiativeList"
      v-bind:key="character.id"
      v-bind:hp="character.hp"
      v-bind:name="character.name"
      v-bind:initiative="character.initiative"
    />
  </div>
</template>
<script>
import EncounterCard from "../EncounterCard/EncounterCard";
import EventBus from "../EventBus";

export default {
  name: "EncounterList",
  components: { EncounterCard },
  data() {
    return {
      data: {
        initiativeList: []
      }
    };
  },
  methods: {
    populateList(charList) {
      this.initiativeList = charList;
    }
  },
  mounted() {
    EventBus.$on("add-to-list", charList => {
      this.populateList(charList);
    });
  }
};
</script>

EncounterCard.js

<template>
  <div class="encounter-card-wrapper">
    <h1 class="char-init">{{character.initiative}}</h1>
    <h1 class="char-name">{{character.name}}</h1>
    <h1 class="char-hp">{{character.hp}}</h1>
  </div>
</template>
<script>
export default {
  name: "EncounterCard",
  props: ["character"]
};
</script>

Answer 1

data() {
    return {
      data: {  //Is this what you're trying to do?
        initiativeList: []
      }
    };
  },

如果要使用data属性，则应将“ initiativeList”更改为“ data.initiativeList”。

<EncounterCard
      v-for="character in data.initiativeList"
      v-bind:key="character.id"
      v-bind:hp="character.hp"
      v-bind:name="character.name"
      v-bind:initiative="character.initiative"
    />

和

populateList(charList) {
    this.data.initiativeList = charList;
}

传递道具的孩子->父母->其他孩子

1 个答案: