Javascript 传球道具儿童->；家长->；其他孩子_Javascript_Vue.js_Vuejs2

Javascript 传球道具儿童->；家长->；其他孩子

javascript vue.js vuejs2

Javascript 传球道具儿童->；家长->；其他孩子,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我正在尝试创建一个基本表单，一旦提交了输入，它会将数据发送给父级，然后作为卡片呈现在列表中。文档一直在引导我使用事件总线，但对于这样一个简单的任务来说，这一切似乎都有点设计过度。更不用说它不工作xD。我走对了吗？还是错过了整个想法数据似乎在提交时更新，但我没有看到卡片渲染。我也看到了下面的错误，属性或方法“initiativeList”未在实例上定义，但在呈现期间被引用。但是，我注意到渲染中有一个特别奇怪的变化。子对象的属性正在合并到父对象中，而不是在EncounterList.js中呈现

我正在尝试创建一个基本表单，一旦提交了输入，它会将数据发送给父级，然后作为卡片呈现在列表中。文档一直在引导我使用事件总线，但对于这样一个简单的任务来说，这一切似乎都有点设计过度。更不用说它不工作xD。我走对了吗？还是错过了整个想法

数据似乎在提交时更新，但我没有看到卡片渲染。我也看到了下面的错误，

属性或方法“initiativeList”未在实例上定义，但在呈现期间被引用。

但是，我注意到渲染中有一个特别奇怪的变化。子对象的属性正在合并到父对象中，而不是在

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>

<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>

<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>

<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>


从“./类/遭遇”导入字符；
从“/NewCharacterForm/NewCharacterForm.vue”导入NewCharacterForm；
从“/EncounterList/EncounterList”导入EncounterList；
从“/EventBus.js”导入EventBus；
导出默认值{
名称：“遭遇棋盘”，
组件：{NewCharacterForm，EncounterList}，
数据（）{
返回{
newChar:{}，
遭遇者列表：[]
};
},
方法：{
addChar（newChar）{
this.newChar=newChar；
this.encounterList.push（newChar）；
EventBus.$emit（“添加到列表”，this.encounterList）；
}
}
};

NewCharacterForm.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>

<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>

<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>

<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>


提交
从“/NewCharInput”导入NewCharInput；
从“../../classes/Character”导入字符；
从“vue uuid”导入{uuid}；
导出默认值{
名称：“NewCharacterForm”，
组件：{NewCharInput}，
数据（）{
返回{
姓名：“，
倡议：“，
惠普：0
};
},
道具：[“addChar”]，
方法：{
handleSubmit（）{
const charName=此。$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=新字符（charName，charinitial，charId，charHp）；
这是。$emit（“添加字符”，newChar）；
}
}
};

EncounterList.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>

<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>

<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>

<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>


初始化
名称
惠普
从“./EncounterCard/EncounterCard”导入EncounterCard；
从“./EventBus”导入EventBus；
导出默认值{
名称：“遭遇者列表”，
组件：{EncounterCard}，
数据（）{
返回{
数据：{
初始列表：[]
}
};
},
方法：{
大众列表（charList）{
this.initiativeList=字符列表；
}
},
安装的（）{
EventBus.$on（“添加到列表”，charList=>{
这是一个流行列表（charList）；
});
}
};

EncounterCard.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>

<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>

<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>

<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>


{{character.initiative}
{{character.name}
{{character.hp}
导出默认值{
名称：“遭遇卡”，
道具：[“角色”]
};

如果要使用数据属性，“initiativeList”应更改为“data.initiativeList”

及