CODEWITHSUNDEEP
vue.js
qliq
qliq

Reputation: 11807

What is the opposite of $set in Vue.js?

In a blog app, I'd like to show/hide comments of each post inside a loop of posts. I know how to show the div containing the comments by setting a showComments on the fly:

this.$set(post, 'showComments', true) ;

But I don't know how to hide the post's comments when the div is already open. What I tried is this:

 if (this.$get(post, 'showComments')==true) {
       this.$set(post, 'showComments', false) ;
      return
    }

The code above thoes not work and I get this error:

Uncaught TypeError: this.$get is not a function

So I'm wondering how can I acheive this functionaliry.

Upvotes: 2

Views: 1011

Answers (2)

Volod
Volod

Reputation: 1427

Use property name to get property value

if ( typeof this.post.showComments !== 'undefined' && this.post.showComments ) {
   Vue.set(post, 'showComments', false);
   return;
}

Also note that you should try to avoid using this.$set because it was deprecated due to conflicts with other libraries. Consider using Vue.set instead.

https://v2.vuejs.org/v2/api/#Vue-set

Upvotes: 0

Yom T.
Yom T.

Reputation: 9180

You should be able to simply read the dynamic property and reapply the value.

new Vue({
  el: '#app',

  data() {
    return {
      posts: [
        { content: 'Post #1' },
        { content: 'Post #2' },
        { content: 'Post #3' }
      ]
    }
  },

  methods: {
    toggleComment(post) {
      if ('showComment' in post) {
        post.showComment = !post.showComment;
      } 
      else {
        this.$set(post, 'showComment', true);
      }
    }
  }
})
.post {
  background-color: lightgreen;
  margin: 10px 0;
  padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <div class="post" v-for="(post, index) in posts" :key="index">
    {{post.content}}

    <p v-if="post.showComment">
      Hidden comments.
    </p>

    <button @click="toggleComment(post)">Toggle comment</button>
  </div>
</div>

Upvotes: 2

Related Questions