SpecialistOff.NET / Вопросы / Статьи / Фрагменты кода / Резюме / Метки / Помощь / Файлы

Назад

Привязка данных и отправка на сервер на Vue.js

Метки: [vue.js]; [javascript]; [axios]; [json-rpc]; 

--- index.html
index.html Скачать 
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios"></script>
</head>
<body>
<section id="app">
<h1 v-html="title"></h1>

<form @submit.prevent="send">

<div class="row">
<div class="col">
<input class="form-control" type="text" v-model="text"/>
</div>
</div>

<div class="row">
<div class="col py-2">
<button type="submit" class="btn btn-outline-success pull-right"><i class="fa fa-save-o"></i> Отправить</button>
</div>
</div>

</form>

</section>

<script>
let foo = null;

const app = Vue.createApp({
    data: function() {
        return {
            title: 'Hello World!',
            text: ''
        }
    },
    methods: {
        send: function() {
            /* Сохранить документ */
            let vm = this;
            axios.post(
                '/api',
                {
                    "jsonrpc": "2.0",
                    "method": 'note.add',
                    "params": {
                        "text": vm.text
                    },
                    "id": 1
                }
            ).then(
                function(response) {
                    if ('result' in response.data) {
                        window.location.href = '/note/' + response.data['result'].id;
                    }
                }
            );
        },
    }
});

app.mount('#app');
</script>

</body>
</html>