Блог

Главная - Вопросы по программированию - Как показать новые добавленные данные?

Как показать новые добавленные данные?

#javascript #vue.js #vuejs2 #vuex

#javascript #vue.js #vuejs2 #vuex

Вопрос:

Я хочу спросить, почему недавно добавленные данные не отображаются в шаблоне, но они показывают недавно добавленные данные при использовании console.log (см. ViewPost.vue).

Это результат после добавления нового сообщения: result.png. Кто-нибудь знает, как этого добиться?

Вот мой родительский компонент: 

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

А ниже — 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);
    },
};

Комментарии:

1. можете ли вы также поделиться своей консолью. вывод журнала?

2. попробуйте v-for перейти ViewPost.vue , он должен реагировать на изменения всего массива

3. @omerS вот оно ibb.co/9yw68Zf

4. @Mik Я не буду этого делать, сэр, мой пост предназначен только для просмотра одного поста

5. итак, он поступает в журнал консоли, но не в шаблон, я прав?

Ответ №1:

index в качестве ключа может работать нормально.

 <template>
    <section>
        //more codes here
        <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 codes here
};
</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);
    },
};

Комментарии:

1. Я только что протестировал Sir, но все равно, он не отображался в шаблоне, но props у него есть. Посмотрите результат vuejs devtools ibb.co/qCLD1jz

2. и bdw, сэр, который я использую unshift , я не использовал push , будут ли это иметь значение?

3. это работает, сэр. Теперь я понимаю проблему, недавно добавленные данные возвращали данные, отличные от моих данных выборки. черт возьми, большое вам спасибо за ваше время, сэр. Я проголосовал против

4. на самом деле, у вас возникает проблема с недавно добавленными данными. Вы не создаете новый объект данных как предыдущие данные. Вы меняете имена параметров. Предположим, ваши уже загруженные данные имеют имя свойства ‘post_body’. но когда вы вставляете новые, вы задаете имя свойства просто «body». Возникает проблема