0๐
โ
As my R&D there were no solution with redirecting to different page. therefore I have decided to hide the content of existing page with button click in vue component and show the the content which I want with button click.
-Get Vue component in blade
<div id="vue-app">
<add-price>
</add-price>
</div>
-Vue component
#ListTable (id of existing content of the page)
<template>
<div class="container">
<a class="contentButton ml-n5" id="addPrice" @click="addPrice">Add Price<i class="fa fa-plus-circle"></i></a>
</div>
</template>
<script>
export default {
name: "AddPrice",
data() {
return {
isShow: false
}
},
methods: {
addPrice: function (){
let x = $('#ListTable');
x.hide();
this.isShow = true;
}
}
}
</script>
Thanks everyone!
Source:stackexchange.com