Vue JS -- How to show-hide content that is dynamically added in the DOM [SOLVED]

1

Hey campers! I am having trouble updating my Vue JS component to show and hide – it is like an accordion in Bootstrap but I don’t want to use jQuery. it works with initial data but when you dynamically add a new element to the DOM, the click even fires but the show/hide doesn’t work.

Basically, if you copy and paste the JSON data in the demo into the textarea and click the submit button, then it updates the table with the data. However the show/hide functionality wont work even though when inspecting the Vue dev console, the data properties do change… weird… Can anyone help?

**SOLVED by extending the new JSON object with an isOpen property to toggle hide and show :slight_smile: **

2

I couldn’t find the show/hide button :confused:
The computed value seems to be wrong, I notice, in the Vue inspector.

3

@JackEdwardLyons

Hi Jack-

The directive I think you are looking for is v-show.

https://vuejs.org/v2/guide/conditional.html#v-show.

I am working on a Vue.Js project and working with dynamic tables and JSON data.

I recommend this open-source component library

http://element.eleme.io/#/en-US/component/table

Here is an example fiddle that dynamically removes rows:
https://jsfiddle.net/wdmntnjz/

4

Hi there,

I have used v-show like this:
<td colspan="12" v-show="shipment.isOpen">

It’s a bit more complicated than just hiding and showing. It’s more to do with dynamic content within a v-for loop.

If you copy and paste in the example JSON into the text area and click the button, you will see that the new data is inputted into a table row. But the issue is that the hidden fields don’t show on click like the original items.

The isOpen property is changing from TRUE to FALSE, but nothing is actually happening. Weird

5

Hi thanks for the response, there is no show/hide button. It’s just the table row you click on. Which computed value are you referring to?

6

v-if and v-show shouldn’t be combined with v-for. It does not re-render.

Please take a look at why computed function might work better:

7

Thanks that is a great link with some good info. Actually, I managed to solve it just now by properly extending the object.

I used the jQuery $.extend() function to the JSON object being passed in. And then I was able to pass the isOpen property through correctly.