Vuejs отправка запроса GET методом - PullRequest
Новая
       0

Vuejs отправка запроса GET методом

0 голосов
/ 21 января 2020

Я пытался отправить GET запрос, используя vue, но теперь я пытаюсь расширить его функциональность. Я хотел бы связать отправку запроса с кнопкой отправки формы, а также передать параметр из текстового поля в форме, которую я создал.

HTML

<html>
<head>
     <meta charset="UTF-8">
     <link rel="stylesheet" type="text/css" href="Bookstyle.css"> 
</head>
<body>
    <div class="navbar">
        <a href="#contact">Cart</a>
        <a href="#about">Orders</a>
        <a href="#profil">Profile</a>
        <form id="searchbar">
            <input type="text" placeholder="Search"> </input> // the input I want to send as paramValue
            <input id="sendButton" type="submit" value="search"> // the button to trigger sending the request
        </form>
    </div>
    <div id="app"></div>
</body>
    <script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
    <script src="./script.js" type="text/javascript"></script>
</html>

JS 

const app = new Vue({
    el: "#app",
    data: {
        paramValue: "test", // the parameter currently bound like this for test purposes
        bookResponse: [],
    },
        mounted() {
            axios
                .get("http://localhost:8080/Books/getByParam/{param}", {
                    params: {
                        param: `${this.paramValue}`
                    }   
                })
                .then(response => (this.bookResponse = response.data))
    },
    template: `
        <div id = "displayReturnedValue">
            <p v-for="book in bookResponse" style="font-size:20px;">
                Title:{{book.title}} 
                Publisher:{{book.publisher}}
                Price:{{book.price}} 
                Availability:{{book.availability}}
                Category:{{book.categoryid.category}}
                Author:{{book.authorid.firstname}} {{book.authorid.lastname}}
            </p>
        </div>`
})

Ответы [ 2 ]

1 голос
/ 21 января 2020

Просто добавьте прослушиватель onclick и свяжите его с помощью метода: 

<input id="sendButton" type="submit" value="search" @click="sendRequest()> 

methods: {
    sendRequest() {
        if (this.$refs.input.value) {
            axios.get("http://localhost:8080/Books/getByParam/{param}", {
                params: {
                    param: this.$refs.input.value
                }   
            })
            .then(response => (this.bookResponse = response.data))
        }
    }
}

Что касается параметра, вы можете просто отслеживать значение, используя $ref. Хотя существует много альтернатив. 

<input ref="input" type="text" placeholder="Search" />

Форма отправляется только в том случае, если вход имеет значение.

0 голосов
/ 21 января 2020

Так в чем твоя проблема? 

axios
.get("http://localhost:8080/Books/getByParam/{param}",{
  params: {
    param: `${this.paramValue}`
  }   
})

В вашем случае, что означает {param} в URL? Может быть, вы хотите сделать это: 

axios
.get(`http://localhost:8080/Books/getByParam/${this.paramValue}`,{
  params: {
    param: `${this.paramValue}`
  }   
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...