CODEWITHSUNDEEP
javascripthtmlformsvue.js
user3006617
user3006617

Reputation: 13

Vue.js submit text button

I have a noob question.

i have a form with a text field. If i type something in, and push enter, no result. If i type something in, and push the button, i get the result i want. Can someone help me fix this - this is written in vue.js

    <div class ="well">
    <form class="form-inline" onsubmit="searchName">
    <h1><label>Enter Search</label></h1>
    <input type="text" name="name" class="form-control" v-model="search">    
    </form>
    </div>
    <input id="clickMe" type="button" value="clickme" v-on:click="searchName" />

Upvotes: 0

Views: 2124

Answers (2)

Kapitan Teemo
Kapitan Teemo

Reputation: 2164

put your button inside the <form> tag and change the button type to submit:

<div class ="well">
    <form class="form-inline" @submit.prevent="searchName">
        <h1><label>Enter Search</label></h1>
        <input type="text" name="name" class="form-control" v-model="search">   
        <input id="clickMe" type="submit" value="clickme"/> 
    </form>
</div>

EDIT

instead of onclick event in the button, use @submit.prevent in the form.

Upvotes: 1

wobsoriano
wobsoriano

Reputation: 13434

You may add an event in your text field.

<input 
type="text" 
name="name" 
class="form-control" 
v-model="search"
v-on:keyup.enter="searchName" 
/>

Or add a submit event in your form

<form 
class="form-inline" 
v-on:submit.prevent="searchName"
>

Upvotes: 1

Related Questions