Как сделать sh новые данные для ввода сверху в списке

Question

привет, как вывести sh новые данные в верхний список, используя vue. js и laravel, я пытался, но все еще не смог, я надеюсь, что кто-то может помочь с проблемой.

это мой контроллер

public function addComment() 
{
    $this->validate(request(), [
        'comment' => 'required',
    ]);

    $comment = [
        'comment' => request()->comment,
        'article_id' => request()->article_id,
        'user_cid' => Auth::user()->user_cid,
    ];
    $comment = ArticleComment::create($comment);
    return new ArticleCommentResource($comment);
}

и это мой Vue. js метод

data() {
        return {
            data: [],
            comments:[],
            form: new Form({
                comment: '',
                article_id: this.articleid,
            })
        }
    },  
methods: {
        onSubmit() {
            this.showLoader = true
            this.form.post('add-comment')
                .then(response => {
                    console.log(response.article_id);
                    this.form.article_id = response.article_id;
                });

        },
 }

как с этим справиться, спасибо

надеюсь кто-то может помочь

Answer 1

Предполагая, что ваш список просто циклически перебирает массив комментариев, вам нужно вывести sh ответ в первой позиции списка:

onSubmit() {
    this.showLoader = true
    this.form.post('add-comment')
        .then(response => {
            this.comments.unshift(response);
        });
},

Это предполагает, что ответ является фактическим комментарием (я могу не вижу в вашем form классе).

Answer 2

<script>
    import Form from 'form-backend-validation';

    export default {
        data:() => ({
            form: new Form({
                article_id: null,
            }),        
        }),

        mounted() {
          this.fetch();  
        },

        methods: {
            async fetch() {
                const response = await this.form.post('add-comment');
                this.form.article_id = response.comment.article_id; 
            }
        }
    }
</script>

Пожалуйста, попробуйте это.