[Vuejs]-Dynamic Rendering with V-If

by

1👍

✅

In updateType, your variables typeIsWebsite, typeIsBook, etc are declared as local variables using let. Thus, when you do the if, you are updating local variables, not your component’s instance variables.
To fix, remove the typeIsX variable declarations in updateType, and use this.typeIsX to refer to each variable.
Like so:

updateType(typeSelect) {
  this.type = typeSelect;

  if (typeSelect === "website") {
    this.typeIsWebsite = true;
    this.typeIsArticle = false;
    this.typeIsBook = false;
  } else if (typeSelect === "article") {
    this.typeIsWebsite = false;
    this.typeIsArticle = true;
    this.typeIsBook = false;
  } else if (typeSelect === "auto_stories") {
    this.typeIsWebsite = false;
    this.typeIsArticle = false;
    this.typeIsBook = true;
  }
 }

Finally, the function doesn’t need to return anything.

As an extra advice, note that this is really verbose code and at least in your use case you don’t need all the flags. Just keeping the current type as a string and then comparing against that would be enough. For example:
this.typeIsWebsite is equivalent to this.type === 'website'.

Remember: less code means less errors!

Leave a comment