how to hide button if status is 1 and hide if status 0?

Usually in an if just change the state. If currently 0 make one, and vice versa. So if hidden unhide.

@jlrdw how to do it sir? sorry but I'm just newbee in vue..

Look at conditional rendering here: https://vuejs.org/v2/guide/conditional.html

Basically if status if status is 1 hide.

I already read it what I'm getting hard is on how to hide the button else show it.... based on my code given above I used conditional rendering but it's not working maybe it's not the right way that's I ask you the right way...but

This is already v-if and v-else-if but what I don't understand is on how to toggle the buttons (show and hide) based on the value of the status

<template v-if="news.status === 0 || news.status === null">
  	<button  class="btn btn-info m-1"  title="Post" @click="updateStatusPost(news.id)" ><i class="glyphicon glyphicon-upload" small></i></button>
   </template>

 <template v-else-if="news.status === 1">
 	<button  class="btn btn-info m-1" title="Unpost" @click="updateStatusUnPost(news.id)" ><i class="glyphicon glyphicon-download" small></i></button>
  </template>

Last answer here has good example:

https://stackoverflow.com/questions/48578738/how-to-hide-div-with-vue-js

Button would be very similar.

Be sure to add the status property to your news object on data declaration, else it won't be reactive. So even if you change its value, Vue won't re-render the DOM.

data() {
  return {
    news: {
      status: 0
    }
  }
}

@piljac1 doesn't work sir.. What I want to do is like in pure laravel..

the situation is like this... I have status in the database and I want to hide post/unpost button based on the value of the status from database

ex.

if status = 1 then, I want to show this (post button) and hide the unpost button <button class="btn btn-info m-1" title="Post" ><i class="glyphicon glyphicon-upload" small></i></button>

then if status = 0 I want to show the unpost button and hide the post button <button class="btn btn-info m-1" title="UnPost" ><i class="glyphicon glyphicon-upload" small></i></button>

and I have that code above but don't know it's the right way

If the 0 or 1 coming from the database is in a string format, it won't work.

Try something like this

v-if="news.status == 0

v-else-if="news.status === 1"

Use two equals instead of three.

Instead of using string type comparison.

@ekpono The value of the status is 1 and 0 sir... what is the proper structure above sir?

this is my new code... but the button is not hiding when the value in the database is 1

<template v-if="news.status == 0 || news.status == null">
                    <button  class="btn btn-info m-1"  title="Post"  @click="updateStatusPost(news.id)" ><i class="glyphicon glyphicon-upload" small></i></button>
                  </template>
                  <template v-else-if="news.status == 1">
                    <button  class="btn btn-info m-1" title="Unpost"  @click="updateStatusUnPost(news.id)" ><i class="glyphicon glyphicon-download" small></i></button>
                  </template>

You keep copy/pasting the almost same code over and over again when your issue is probably at a higher level. Can you post all code related to the news object (including your APi logic, etc.).

Can you also post the JSON version of news after it got affected ? Here's the code to use to generate a readable JSON output:

JSON.stringify(this.news, undefined, 4);

@anonymouse703 console log news status to see if it is a string or an integer

@piljac1 All right I will post the codes here for you to have a reference.

Here the is where I get my news list and mounted

 getNewsList(){
        // axios.get('/api/news').then(response => this.newslist = response.data);
        axios.get('/api/news').then((response) =>{
          this.newslist = response.data;
          console.log(this.newslist);
        } );
      },
mounted(){
      this.getNewsList();  
      
    },

this is the data from console

created_at: "2020-09-25T20:20:31.000000Z"
description: "news in the mornin"
id: 1
news_image: "1601094031_4695405942_0fa1fde373_b.jpg"
post_status: 1
title: "News 1"
updated_at: "2020-09-27T03:58:31.000000Z"

and this is where I display the data from the newslist

<tbody>
    <tr v-for="news in newslist" :key="news.id">
    <td>{{news.title}}</td>
    <td>{{news.description}}</td>
    <td class="text-right align-middle">

        <template v-if="news.status == 0 || news.status == null">
        <button  class="btn btn-info m-1"  title="Post"  @click="updateStatusPost(news.id)" ><i class="glyphicon glyphicon-upload" small></i></button>
        </template>
        
        <template v-if="news.status == 1">
        <button  class="btn btn-info m-1" title="Unpost"  @click="updateStatusUnPost(news.id)" ><i class="glyphicon glyphicon-download" small></i></button>
        </template>

    </td>

    <td class="text-right align-middle">
        <button type="button" class="btn btn-primary " @click="editNews(news)" >
            <i class="fa fa-edit"></i>
            &nbsp;Edit
        </button>


        <button class="btn btn-danger delete-news" @click="deleteNews(news.id)">
            <i class="fa fa-trash"></i>
            &nbsp;Delete
        </button>
    </td>
    </tr>

</tbody>

@ekpono

this is the data from console

created_at: "2020-09-25T20:20:31.000000Z"
description: "news in the mornin"
id: 1
news_image: "1601094031_4695405942_0fa1fde373_b.jpg"
post_status: 1
title: "News 1"
updated_at: "2020-09-27T03:58:31.000000Z"

@anonymouse703

Obviously your variable is called differently

created_at: "2020-09-25T20:20:31.000000Z"
description: "news in the mornin"
id: 1
news_image: "1601094031_4695405942_0fa1fde373_b.jpg"
post_status: 1
title: "News 1"
updated_at: "2020-09-27T03:58:31.000000Z"

// based on data
news.post_status
// yours
news.status

@usaandi I'm sorry I changed the field name... what I mean on my post is to toggle the two button if post_status = 1 the unpost button will display and the post button will hide and if the post_status = 0 the post button will display and the unpost button will hide. because right now the two button is displayed

@anonymouse703 Do you mean something like this? https://codesandbox.io/s/polished-rgb-gpdbl?file=/src/App.vue

@usaandi yes but the data is from what I mounted.. that's why my condition is v-if="news.post_status == 1 it's from <tr v-for="news in newslist" :key="news.id"></tr>

data(){
      return {
        newslist: { },
    },
 mounted(){
      this.getNewsList();  
      // console.log(this.newslist);
    },
method:{
getNewsList(){
        // axios.get('/api/news').then(response => this.newslist = response.data);
        axios.get('/api/news').then((response) =>{
          this.newslist = response.data;
          // console.log(this.newslist);
        } );
      },
updateStatusPost(id){
        // console.log(id);
        axios.post('api/news-post/'+id).then(reposnse =>{
          console.log(id);
          this.getNewsList();
          swal.fire({
                icon: 'success',
                title: 'News posted successfully'
              })
        });
      },
      updateStatusUnPost(id){
        axios.post('api/news-unpost/'+id).then(reposnse =>{
          this.getNewsList();
          swal.fire({
                icon: 'success',
                title: 'News unposted successfully'
              })
        });
      }
}

I don't know if it will automatically read the changes or not after hitting the post/unpost button.

what is actually situation? everything is mixed up.