Как передать скрытое свойство Vue в объект

Question

Что-то окончательно запутался . Есть компонент с формой у формы 2 поля body - реактивное и comment_id которое в скрытом инпуте. Как мне передать в comment.comment_id это скрытое свойство?

FormComponent

<template>
    <form method="post"
          id="comments_form" class="form form_comment-message">
        <div class="tm-editor__textarea-wrap">
        <textarea cols="40" rows="5" v-model="comment.body"
                  name="body"></textarea>
        </div>
        <input type="hidden" name="comment_id"  :value="comment_id">
        <div class="form__buttons form__buttons_comment js-form-buttons">
            <button type="button" @click.prevent="addComment()" name="send"
                    class="btn btn_x-large btn_blue">Add comment
            </button>
        </div>

    </form>

</template>

<script>
    export default {
        name: "FormComponent",
        data: function () {
            return {
                comment: {
                    'body': '',
                    'comment_id': ''
                }
            }
        },
        methods: {
            addComment() {
                let newComment = app.comment;
                window.axios.post('/api/comments/', newComment)
                    .then(function (resp) {                       

                    })
                    .catch(function (resp) {
                        alert("Could not add comment");
                    });

            }

        }


    }
</script>

При вызове компонента передаю значения

    <form-component v-if="show" v-bind:comment_id="index"></form-component>

В дебаггере в $attr все правильно отражается

Answer 1

В родительском компоненте нужно добавить props в компонент.

<FormComponent :comment_id="comment.comment_id"/>

но для этого потребуется добавить

<script>
    export default {
        name: "FormComponent",
+++     props: ['comment_id'],
        data: function () {
            return {
                comment: {
                    'body': '',
--                 //'comment_id': ''
                }
            }
        },
        methods: {
            addComment() {
--                //let newComment = app.comment;
                let newComment = {
                    body: this.body,
                    comment_id: this.comment_id
                };
                window.axios.post('/api/comments/', newComment)
                    .then(function (resp) {                       

                    })
                    .catch(function (resp) {
                        alert("Could not add comment");
                    });
            }
        }
    }
</script>
...

БЛОГ НА HUSL

Как передать скрытое свойство Vue в объект

Ответы (1 шт):