У меня есть дочерний компонент, отправляющий данные через событие родительскому компоненту в VueJS. От родительского компонента я направляю данные (или пытаюсь направить данные ...) к дочернему элементу дочернего элемента и создаю новые компоненты с данными, отправленными дочерним компонентом.
Я использую словарь длясгруппируйте данные по разным причинам, затем вставьте словарь в массив. Цикл v-for проходит через массив и заполняет ранее упомянутые новые компоненты данными, найденными в этом массиве. Мне, вероятно, не нужно делать это таким образом, но я так и делаю. Я открыт для альтернатив.
Во всяком случае, это не работает отлично. Пока что я могу получить только одну из трех строк, которые мне нужны, чтобы показать, где я хочу. Я объясню больше после публикации кода.
Уже попробовал:
Десяток различных версий кода, включая создание простого v-for в списке для выполнения работы, иразличные версии с / без словаря или массива.
В своем исследовании проблемы я просмотрел документы VueJS, гуглил несколько вещей и ничего не нашел.
В App.vue(Я пытался удалить все несущественные вещи):
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<TweetDeck v-on:messageFromTweetDeck="msgReceived($event)"/>
<!-- <ul>
<li v-for="(tweet, index) in tweets" :key="index">{{ tweet }}</li>
</ul>-->
<TwitterMsg v-for="(tweet, index) in tweets" :key="index"
:name="tweet.name" :handle="tweet.handle" tsp=3 :msg="tweet.tweet" />
<TwitterMsg name="aaa" handle='aaa'
tsp=50 msg="hey this is a message on twitter"/>
<input type="text" v-model="placeholderText"/>
</div>
</template>
<script>
import TwitterMsg from './components/TwitterMsg.vue'
import TweetDeck from './components/TweetDeck.vue'
export default {
name: 'app',
components: {
TwitterMsg,
TweetDeck
},
data: function() {
return {
tweets: [],
message: "",
placeholderText: ""
}
},
methods: {
msgReceived(theTweet, name, handle) {
this.tweets.push({tweet: theTweet, name: name, handle: handle})
}
}
}
</script>
И в TweetDeck.vue:
<template>
<div>
<input type='text' v-model="yourName">
<input type='text' v-model="yourHandle">
<input type='text' v-model="yourTweet"/>
<button type='button' @click="sendTweet()">Tweet</button>
</div>
</template>
<script>
export default {
name: "TweetDeck",
data: function() {
return {
yourName: "Your name here",
yourHandle: "Your twitter handle",
yourTweet: "What's going on?"
}
},
methods: {
sendTweet() {
this.$emit('messageFromTweetDeck', this.yourTweet, this.yourName, this.yourHandle);
}
}
}
</script>
Вы также можете увидеть здесь самое незначительное TwitterMsg.vue (я пытаюсьЧтобы скопировать Twitter для изучения:
<template>
<div>
<h4>{{ name }}</h4>
<span>@{{ handle }}</span>
<span> {{ tsp }}</span> <!-- Time Since Posting = tsp -->
<span>{{ msg }}</span>
<img src='../assets/twit_reply.png'/><span>1</span>
<img src="../assets/twit_retweet.png"/><span>2</span>
<img src="../assets/twit_fave.png"/><span>3</span>
</div>
</template>
<script>
export default {
name: "TwitterMsg",
props: {
name: String,
handle: String,
tsp: String,
msg: String
}
}
</script>
<style>
img {
width: 30px;
height: 30px;
}
</style>
Ожидаемый результат: код заполняет новый компонент TwitterMsg соответствующим именем, дескриптором и данными сообщения каждый раз, когда я нажимаю кнопку «Tweet».
Фактические результаты: мой код не может помочь имени и обработать строки, чтобы сделать его из текстового поля ввода в TweetDeck.vue вплоть до их дома в TwitterMsg.vue.
Я скажу, что this.yourTweet в TweetDeck.vue ДЕЛАЕТудается пройти весь путь до места назначения, и это хорошо - хотя меня удивляет, почему два других фрагмента данных не последовали за набором.
Полностью потерян. Также только в мой первый месяц VueJS, так что довольно хорошо, что я могу даже сделать одну строку там, где я хочу. \ О /