My VueJS setup involves a child component sending data to a parent component, which then tries to route the data to a sibling of the child to create new components. I'm using a dictionary to group the data and push it into an array. The array is then looped through with a v-for loop to populate the new components. While this approach may not be optimal, it's what I have currently implemented. I am open to suggestions for better alternatives.
Unfortunately, the current implementation is not working as expected. I am only able to get one out of three strings to show up where intended. More details will follow after I present the code snippet.
Attempts made so far:
I have tried various versions of the code, including using a simple v-for loop in a list, as well as different iterations with or without dictionaries or arrays.
In my troubleshooting process, I have referenced the official VueJS documentation, searched through online resources, but have not found a solution yet.
Below is a stripped-down version of the main App.vue file:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<TweetDeck v-on:messageFromTweetDeck="msgReceived($event)"/>
<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>
The relevant content of the TweetDeck.vue file is provided below:
<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>
You can also find the less significant TwitterMsg.vue file included here (which mirrors features of 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>
Expected outcome: The code should generate a new TwitterMsg component with the correct name, handle, and message data every time the "Tweet" button is clicked.
Actual results: Despite successfully passing the tweet message from TweetDeck.vue to TwitterMsg.vue, the name and handle strings do not reach their intended destination within the components.
I am somewhat disoriented as I am relatively new to VueJS, but I take comfort in the fact that at least one piece of string data is being displayed correctly. 🎉