Show and hide json data


#1

Hello everybody,

i am totally new to Vue and i want to create a little project for me.

So, here is my todo:

  1. Show/hide elements from json if a specific ID is clicked

For example:
i click on a button with id 1, in id 1 i have rules to hide id 2 and 4, BUT when i click on id 5, id 2 should be displayed again. At the moment, when i click on id 1, id 3,2,1 will be hidden, but how can i display id 1, when i click on id 5?

Id 6 has a display:none, how can i make a display:block, when i click on id 4?

Here is my code and thx for help :slight_smile:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>VueTest</title>
<link rel=“stylesheet” href=“https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css” integrity=“sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS” crossorigin=“anonymous”>

</head>
<body>
<div class=“container”>
<div class=“row”>
<div id=“app”>
<div v-for=“product in products” :key=“product.id” class=“col-md-4”>

<div :style="{ display: [product.display] }">

<h3>{{product.title}}</h3>
<button class=“btn btn-md btn-danger” @click=“removeChild(product)”>Remove {{product.id}}</button>
</div>
</div>

</div>
</div>
</div>

<script src=“https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

<script>

new Vue({

el:"#app",
name:“App”,
data:{

products:[
{“id”: 1, “title”: “iPad 4 Mini”, “price”: 500.01, “inventory”: 2, “rules”: [3,2,1], “display”:“block”},
{“id”: 2, “title”: “H&M T-Shirt White”, “price”: 10.99, “inventory”: 10, “rules”: [3], “display”:“block”},
{“id”: 3, “title”: “Chafvddvgrli XCX - Sucker CD”, “price”: 19.99, “inventory”: 5,“rules”: [0], “display”:“block”},
{“id”: 4, “title”: “Charlirtgrtg XCX - Sucker CD”, “price”: 19.99, “inventory”: 5,“rules”: [0], “display”:“block”},
{“id”: 5, “title”: “Charrtgrtgrthzzli XCX - Sucker CD”, “price”: 19.99, “inventory”: 5,“rules”: [0], “display”:“block”},
{“id”: 6, “title”: “Charrtgrtgrthzzli XCX - Sucker CD”, “price”: 19.99, “inventory”: 5,“rules”: [0], “display”:“none”}
]

},
methods:{

removeChild: function (product){

this.products = this.products.filter(prd => {
return ! product.rules.includes(prd.id)
});

}
}

});

</script>
</body>
</html>


#2

you can use a computed prop to return the filtered list instead of changing your original data.

...
<div v-for="product in filteredProducts" :key="product.id" class="col-md-4">
...
...  
computed: {
    filteredProducts() {
      if (!this.selectedProduct) return this.products
      return this.products.filter(prd => {
        return !this.selectedProduct.rules.includes(prd.id)
      });
    }
  }
...

jsfiddle


#3

Hello maikinahara,

that is nice :slight_smile: Thank you for your help.

So, when i click on ID 2, ID 3 is hidden, how can i implement, when i click on ID 2 again, that i show ID 3 again?

Rgds
Stef


#4

i dont know what you are trying to achive.

updated jsfiddle


#5

As i told you i am a beginner to Vue and i want to try something new, last years i coded in jQuery, but i think it is a little bit “old-school” for now :slight_smile:

I want create a little project for me, something like a calculator, where i can show and hide elements.