Прохождение Реквизит Ребенок -> Родитель -> Ребенок
Я пытаюсь создать базовую форму, которая после отправки ввода отправляет данные родителю и затем отображается в списке в виде карты. Документация указывала мне на использование шины событий, но все это кажется немного слишком спроектированным для такой простой задачи. Не говоря уже о том, что он не работает xD. Я на правильном пути здесь? или не хватает всей идеи?
Данные, похоже, обновляются при отправке, но я не вижу рендеринга карты. Я также вижу следующую ошибку,
Property or method "initiativeList" is not defined on the instance but referenced during render.
Однако я замечаю особенно странное изменение в рендере. Вместо того, чтобы ребенок был представлен в EncounterList.js
дочерние атрибуты сливаются с родительскими .
Любая помощь очень ценится.
Встреча с дэшбордом.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>
Новая характеристика.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>
Встречаюсь с ним.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>
Встречная карта.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>
Ответы - Прохождение Реквизит Ребенок -> Родитель -> Ребенок / Passing Props Child -> Parent -> Other Child

18.09.2019 08:50:39
data() {
return {
data: { //Is this what you're trying to do?
initiativeList: []
}
};
},
Если атрибут data предназначен, "initiativeList "должен быть изменен на" data.инициатор".
<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;
}