Проблемы с набором текста в textarea

Question

Пишу простенькую форму которая должна открываться поверх страницы. Всё работает, кроме полей для ввода текста. Любых - input\textarea, просто ничего не пишется. Мне кажется что проблема совсем простая, но никак не могу увидеть в чём она. Так же будет здорово если укажите на ошибки при работе с Vue. Всем заранее спасибо за советы!

ps: Это весь проект, разделять его на отдельные страницы не хочется, кроме стилей.

<!DOCTYPE html>
<html lang="en" xmlns:="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-range-slider.min.css">
    <script src="https://unpkg.com/[email protected]/dist/vue-range-slider.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>

<div id="app" class="container">
    <img :src="'data:image.png;base64,' + imageLink">
    <button class="btn btn-primary" @click="showModal=true">Настройки</button>


    <div v-if="showModal">
        <transition name="model">
            <div class="modal-mask">
                <div class="modal-wrapper">
                    <div class="modal-container">
                        <button @click="showModal=false" type="button" class="close" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <div class="modal-body">
                            <form v-on:submit="send">
                                <div>{{ text }}</div>
                                <textarea class="form-control slide" rows="3"
                                          placeholder="Введите текст" v-model="info.text"></textarea>
                                <vue-range-slider v-model.number="info.value"></vue-range-slider>
                                <div class="btn-container">
                                    <button class="btn btn-success" type="submit">Сохранить</button>
                                    <button class="btn btn-danger" type="reset" @click="info.value=value">Очистить
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</div>


<script>
    const app = new Vue({
        el: '#app',
        data: {
            showModal: false,
            imageLink: '',
            value: 0,
            text: '',
            info: {
                value: 0,
                text: ''
            }
        },
        mounted() {
            axios.get('http://localhost:8081/site/api/v1/test/image/1')
                .then((resp) => {
                    this.imageLink = resp.data
                })
            axios.get('http://localhost:8081/site/api/v1/test/info')
                .then((resp) => {
                    this.text = resp.data.text
                    this.value = resp.data.value
                    this.info.value = resp.data.value

                })
        },
        methods: {
            send: () => {
                axios.post('http://localhost:8081/site/api/v1/test/info', this.info)
            }
        }
    })
</script>
</body>
</html>


.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: table;
    transition: opacity 0.3s ease;
}

.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.modal-container {
    width: 400px;
    margin: 0px auto;
    padding: 10px;
    background-color: #fff;
    border-radius: 1px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
    transition: all 0.3s ease;
    font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
    margin-top: 0;
    color: #42b983;
}

.modal-body {
    margin: 10px;
}

.modal-default-button {
    float: right;
}

.slide {
    margin-bottom: 40px;
}

.modal-enter {
    opacity: 0;
}

.modal-leave-active {
    opacity: 0;
}

.btn-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 15px;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

БЛОГ НА HUSL

Проблемы с набором текста в textarea

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