I've built a two button toggle using v-on:click that renders a specific data object on click, while removing the previously clicked object. I would like to continue this functionality with multiple data objects, so I could have numerous buttons and respective objects. I would like to achieve this without using routing but I am unsure of the best way.

I'm assuming I should be using binding, but I was unable to have a variable dynamically update depending on the which button is clicked.

One of my data objects:

const app = new Vue({
el: '#app',
data: {
search: '',
postList: [
new Post(

new Post(
'10 coin',

new Post(
'20 coin',


computed: {
filteredList() {
  return this.postList.filter(post_any => {


 And a simple two way toggle:

  <div v-if="awesome">
 <div  id="#app">
 <div class="search-wrapper">
<input type="text" v-model="search" placeholder="Search title.."/>
    <label>Search title:</label>
 <div class="wrapper">
  <div class="card" v-for="post in filteredList">
  <a v-bind:href="post.link" target="_blank">
    <img v-bind:src="post.img"/>
    <small>posted by: {{ post.author }}</small>
    {{ post.title }}

the buttons: 
 <h1 v-if="!awesomer"><button v-on:click="awesome = !awesome">Super 
<h1 v-if="!awesome"><button v-on:click="awesomer = !awesomer">Mario 


No errors, but I believe there is a simple solution that I'm not seeing. Any suggestion on how to approach this issue or or resources that deal this type of feature would be greatly appreciated.

0 Answers