CODEWITHSUNDEEP
vue.jsvuejs2vue-component
Przemyslaw Wojtas
Przemyslaw Wojtas

Reputation: 391

Vue on click inside component

I have component like this:

<template>
<!-- Content for section1 -->
<div id="section1" class="container-fluid home-div">
    <h1 class="text-center">Create Your own Website!</h1>
    <p>Welcome to website builder a place where magic comes true. This website will allow you to create your own website, host it on our webserver and change the content or add content as you go!
    </p>
    <button v-on:click="next" class="btn btn-primary"></button>
</div>
</template>

and my js:

  import Vue from 'vue';
import VueRouter from 'vue-router';
import Section1 from '../vue/components/homepage.vue';
import Section2 from '../vue/components/section2.vue';

const routes = [
    { path: '/', component: Section1 },
    { path: '/about', components: Section2, },
];

Vue.use(VueRouter);

const router = new VueRouter({
    routes,
});

new Vue({
    el: '#homepage',
    router,
});

html:

<div id="homepage">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{{ url('template') }}">Website Builder</a>
        </div>
        <div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li><router-link to="/">Create</router-link></li>
                    <li><router-link to="about">How</router-link></li>
                </ul>
            </div>
        </div>
    </nav>
    <router-view></router-view>
</div>

So now when I click on the link nothing happens, it has a path of /#/ and /#/about respectively, and are being transformed to tags, what is wrong with my current code? Should the navigation be as a template maybe or within the template?

Upvotes: 0

Views: 2947

Answers (2)

Stephan-v
Stephan-v

Reputation: 20289

Your component has local scope, meaning it will try and call a next method on the component itself and not on your root instance where you have actually defined your method.

Depending on your situation and what you want you need to either move the method inside your homepage or section2 component.

Or you need to notify your root Vue instance whenever the click event has been called in a child component. There are many communication patterns possible with Vue.js for child-parent communication an easy one would be this:

https://v2.vuejs.org/v2/guide/components.html#Custom-Events

On click you would emit an event from your child component and use a v-on to listen to the event in your root instance.

But by the looks of it you want to implementing routing with one component per page:

https://v2.vuejs.org/v2/guide/routing.html

Upvotes: 2

Gleb Varenov
Gleb Varenov

Reputation: 2835

in your 'new App', when you set 'el' property it should refer to an ID of an html element (the root element).

your html should be like this instead:

<div id="homepage">
  <homepage v-if="seen"></homepage>
  <section2 v-else></section2>
</div>

Upvotes: 0

Related Questions