[Vuejs]-Change page layout on link click vue.js

by

0👍

✅

Please read up on Conditional Rendering in Vue.js.

You can have a boolean variable in the data compartment of your script tag and change it on click.

And in the tags put v-if="your_bool_variable".

<div id="vue-app" v-if="layout_switch">
  <a href="#">link to layout 2</a>
  <div class="col-12">starting layout </div>
</div>

// after the user click the link (v-on:click) the layout change

<div id="vue-app" v-else>
  <a href="#">link to layout 1</a>
// layout change
  <div class="col-6">new layout </div>
  <div class="col-6">new layout </div>
</div>

Negate the boolean variable at the @click event.

Data could look like the following:

<script>
    export default {
        name: "YourComponent",
        data: () => {
            return {
                layout_switch: true
            }
        },
        methods: {
            changeLayout() {
                this.layout_switch = !this.layout_switch;
            }
        }
    }
</script>

Leave a comment