Skip to main content

How to render v-if condition using the index of a loop in Vue JS.

v-if=array[index] not working

If you are new to Vue you may not be familiar with this limitation of this framework. Actually its not a limitation of Vue js. It happens because Vue cannot detect the changes of an array element directly, this is one of the limitation of JavaScript.  But thankfully, Vue has a solution for this, as always .

 This is the problem I faced while working on my project, I spent quite a few hours wondering what went wrong because everything I did was correct. After spending few hours debugging and googlilng I found out that Vue cannot detect the change in array directly. But as already mentioned vue has a way to solve this. Vue provides a helper function Vue.set() which changes the array element and makes it reactive.


this.show[index] = !this.show[index]

//simply doing this does not work. So we have to Use Vue.set helper function

this.show[index] = !this.show[index]

//simply doing this does not work. So we have to Use Vue.set helper function

 Vue.set(this.show, index, !this.show[index])

//That is the Vue method but if we are using ES6 we can also use native JS spread operator to solve this problem.


this.show[index] = !this.show[index]
this.show = [...this.show]


That's it !

 

 

 

 


Comments

Post a Comment

Popular posts from this blog

How to read nth line of a text file in C programming using file handling?

C program to read the nth line of a file.  This file handling C program illustrates how to read the nth content of a text file.  Suppose your text filename is "documents.txt" and you want to read only 9th line of that file. Here's a source code to do so. #include <stdio.h> int main () { FILE * file = fopen ( "documents.txt" , "r" ); char line [ 256 ]; int i = 0 ; while ( fgets ( line , sizeof ( line ), file )) { i ++; if ( i == 9 ) { printf ( "%s" , line ); } } fclose ( file ); return 0 ; } Similarly if you want to read only the 1st/2nd/3rd/4th/5th or any other line then just run variable i till your desired line.   For example if i  want to read the 10th line of the same file if ( i == 10 ) { printf ( "%s" , line ); }
Post a Comment
Read more

How to connect php to mysql database? Simple html comment box tutorial.

First thing first. You will need a little bit knowledge of web programming. Simple HTML will work. Now here is a step by step procedure on how to connect php to mysql database using local server. Lets create a simple comment box. And I will teach you how to do this on both Mac or windows/Linux. Here is a list of Applications you need before doing some coding. A text editor ( I would recommend Sublime text ) A local server software ( MAMP for mac , Xampp for windows/linux) Now that you have downloaded your local server software, install it and start the servers. If you are on mac follow the screenshot to start up the servers. Bravo ! Your computer is now a server (local though). If you are on windows/Linux follow the similar procedure to start your servers.  Now lets get into some simple coding. Since we are going to make a simple comment box, lets create two files "comment.php"and "comment_post.php" inside htdocs folder. Note : Your def...
24 comments
Read more