What is the best way to display recently added information?

I'm curious about why the newly added data isn't showing up in the template, even though it does appear when using console.log (check out ViewPost.vue).

After adding a new post, this is the result: result.png. Does anyone know how to fix this?


My parent component looks like this:
<template>
    <section>
        //more codes here
        <ViewPost v-for="data in postData" :key="data.post_id" :data="data" />
    </section>
</template>

<script>
import { mapState } from 'vuex';
export default {
    components: { ViewPost },
    computed: {
        ...mapState({
            postData: state => state.post.datas,
        }),
    }
    //more codes here
};
</script>

Below is the content of ViewPost.vue:

<template>
    <span>
        <div class="card mb-10">
            <h1>body</h1> 
            {{ data.post_body }}
        </div>
    </span>
</template>

<script>
export default {
    props: {
        data: {},
    },
    
    created() {
        console.log(this.data);
    },
};

Answer №1

Using "index" as a key might be the solution here.</p>
<pre><code><template>
    <section>
        //more code snippets
        <ViewPost v-for="(data,index) in postData" :key="index" :data="data" />
    </section>
</template>

<script>
import { mapState } from 'vuex';
export default {
    components: {ViewPost},
    computed: {
        ...mapState({
            postData: state => state.post.datas,
        }),
    }
    // more code snippets
};
</script>

ViewPost.vue

<template>
    <span>
        <div class="card mb-10">
            <h1>body</h1> 
            {{ data.post_body || data.body }}
        </div>
    </span>
</template>

<script>
export default {
    props: ['data']
    
    created() {
        console.log(this.data);
    },
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming information into properties for the main component in Vue.js 2

I've been scratching my head over this seemingly simple issue... With Vue, I have a handle on passing props from parent to child components. I also grasp the concept of having an app state in the data property of the Vue instance. However, I'm s ...

Understanding the default value type in React's setState method

I am new to React and facing difficulties identifying errors in my code. My goal is to display a list of users retrieved from a server using socket.io. Below is the original code snippet: // list of users const [users, setUsers] = useState() useEffect(() ...

What is the reason that this jQuery code is exclusive to Firefox?

I am currently working on a code snippet that enables users to navigate back and forth between images by displaying them in a lightbox at full size. The code functions flawlessly in Firefox, however, it does not seem to have any effect on IE, Chrome, and S ...

Is there a way to verify in AngularJS whether ng-model contains a string or a numerical value?

In my Angular application, I have written a JavaScript function that checks if the value of a text field is undefined or empty, and it is working properly. $scope.checkNumber = function(user_answer){ if(user_answer == undefined){ return false; } } My ...

Utilizing Node.js, delete the author from the database and then use a GET request to display all

Exploring node and express for the first time. I've been working on an example that utilizes GET and POST methods, but now I want to implement DELETE function to delete a book based on its title. Additionally, I need to introduce another GET method to ...

Vue.js - updating npm to patch version with unclean git working directory

I recently followed a tutorial on how to publish packages to NpmJS. However, I encountered an error when trying to update the package after making changes to the README.MD: npm version patch npm ERR! Git working directory not clean. npm ERR! A .gitignore ...

Is there a way to simulate a middle mouse click using Selenium and JavaScript?

I am looking to simulate a middle button mouse click on a text URL within a webpage using Selenium code in JavaScript so that it opens in a new tab. Here's an example: await driver.get("https://google.com"); // This is the xpath for the &a ...

How can I extract specific data from a JSON response and populate a select dropdown with AngularJS?

My current project involves making an http.get request to fetch a list of airports. The JSON response is packed with information, presenting a series of objects in the format shown below {"id":"1","name":"Goroka","city":"Goroka","country":"Papua New Guine ...

Encountering an issue while trying to create a Vue3 Vite application because of the assignment of a read-only property 'name

I am facing an issue with my Laravel app that utilizes Vite, Vue3, and Inertiajs. Previously, I was able to build it successfully. However, now I encounter the following error: Cannot assign to read only property 'name' of function '(userOp ...

Encountered difficulty accessing the controller ActionResult from JavaScript代码

Resolution: After thorough investigation, I successfully identified and resolved the issue. Surprisingly, it was not related to the Javascript or Controller code as initially anticipated. The root cause stemmed from a .dll file that was causing discrepanci ...

Trouble with Mongoose save() function failing to update data

I am currently working on enhancing a fully functioning CRUD app by adding a new feature that allows users to update a list of vendors. They have the ability to add new vendors, update existing ones, and delete vendors. While the add and delete functions a ...

The login method does not pause for the dispatch action to be completed before navigating to the next

Within the UserLogin component, there is a submit button that triggers the following method: methods: { login() { this.$store .dispatch("login", { email: this.email, password: this.password ...

Tips for obtaining immediate model updates within Agility.js

I am currently facing an issue with Agility.js regarding the 'change' event. This event is triggered every time a model within the object is modified. However, in my case, the model only gets updated when losing focus or pressing enter. I would l ...

Exploring the possibilities with JavaScript options

I am currently working on a project that involves a dropdown list... to complete unfinished sentences. Unfortunately, I am facing an issue with a message stating Uncaught TypeError: Cannot read property 'options' of null Below is a portion of m ...

Harness the Power of JSON in your JavaScript Applications

I have come across many examples on Stack Overflow discussing how to parse JSON into a JavaScript object or convert JSON to a JS object. However, I haven't found an example that demonstrates binding JSON to an already defined JS object. I am currently ...

Utilizing an EJS variable within a React render function with webpack - A Guide

I am looking for a way to display personalized information stored in a MySQL database to my users. I am using ejs, webpack, and React for my project. While I found some guidance on how to achieve this without webpack, it doesn't quite fit my needs. Th ...

The product has been taken out of the cart, yet it has not been reinserted into the cart

The product disappears from the cart after clicking on Add to Cart, but it doesn't reappear when clicked again. //function for adding only one item to cart document.getElementById('btn1').onclick = function() { addItemToCart() }; fun ...

Stopping the loop: Disabling the SetInterval function with ResponsiveVoice code in JavaScript

Currently, I am developing a queuing system and implementing voice announcements using Responsive Voice. I have used setInterval, but the issue is that the voice keeps looping without stopping. $( document ).ready(function() { setInterval(function() ...

How to Handle Duplicate Elements in #each Svelte Block

I've encountered an issue with the related posts component on my Svelte website. While it functions correctly, there is a problem with duplicate articles showing up in the block. For example, if two articles contain three identical tags each, those ar ...

Retrieving dropdown options with the help of selenium and node.js

I'm looking to gather all the options from a dropdown menu and loop through them to submit a form. I need the list of values from the dropdown. The following Java code meets my requirements perfectly, but I am in need of the same functionality in Jav ...