Redirection from a vue component to a laravel route

Question

I have a Vue component named searchbox and I want the users to get redirected to display the results once they type the name and click the search button. I am using axios to make the http request. Here's my template:

<form @submit.prevent="searchResult">
    <div class="field has-addons searchbox">
        <div class="control">
            <input class="input" type="text" id="search" name="q" placeholder="Search a video..." @keyup.enter="searchResult"  v-model="searchData">
        </div>

        <div class="control">
            <button class="button is-primary"><i class="fa fa-search"></i></button>
        </div>
    </div>
</form>

Here's my script in the Vue file:

<script>
    export default {

        data() {
            return {
                searchData: null,
            };
        },

        methods: {
            searchResult() {
                axios.get('/search?q=' + this.searchData);
            }
        }       
    }
</script>

Here's my search controller:

class SearchController extends Controller {

    public function index(Request $request) {
        return view('search.index');
    }
}

However, I can not see the redirection. How do I redirect from vue component to another route in laravel??

Is vue-router necessary or we can follow any other method??

Kermit Kermit · Accepted Answer · 2017-07-22T04:39:48

you can replace axios.get('/search?q=' + this.searchData); with window.location.href = '/search?q=' + this.searchData;

Redirection from a vue component to a laravel route

1 Answers