Vue on click inside component

Question

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?

does the javascript console of your browser show any errors or warnings? — cello
– cello, Commented Oct 30, 2017 at 15:38
probably the next() method is not correctly defined. It should be next: function () {....} instead of next() {...}. — cello
– cello, Commented Oct 30, 2017 at 15:39

tony19 · Accepted Answer · 2022-07-15 02:36:31Z

2

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

edited Jul 15, 2022 at 2:36

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 30, 2017 at 15:38

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Przemyslaw Wojtas Over a year ago

Hi, probably, ideally I need 1 component and switch between templates to create a slide show between 4 sections. Care to provide me with a quick example using my code please?

Stephan-v Over a year ago

This is a very good example if you do not want to implement the full router: vuejs.org/v2/guide/routing.html#Simple-Routing-From-Scratch

Przemyslaw Wojtas Over a year ago

That is good example, however is it possible to do in on one route i.e routing in '/' otherwise it will redirect me to another page?

Stephan-v Over a year ago

In that case you might be better off implementing the fully fledges router: router.vuejs.org/en

Przemyslaw Wojtas Over a year ago

please see my edit and help me solve that one last problem ;)

|

Gleb Varenov · Accepted Answer · 2017-10-30 15:40:03Z

0

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>

answered Oct 30, 2017 at 15:40

Gleb Varenov

2,8453 gold badges20 silver badges18 bronze badges

1 Comment

Przemyslaw Wojtas Over a year ago

I missed out the div: it is like this already: <div id="homepage"> <homepage v-if="seen"></homepage> <section2 v-else></section2> </div>

Collectives™ on Stack Overflow

Vue on click inside component

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related