title: Vue how to display the edit button only when a field in a table is false
body: <p>I have a table with users' holidays and I would like the edit button to appear only when the confirmed field is false. And when vacation is already confirmed then button should not be visible</p>
  <p>Vacation request table <strong>:</strong></p>
  <p><a href="https://i.stack.imgur.com/6csCV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6csCV.png" alt="enter image description here" /></a></p>
  <p>Here is my template with vacation table:</p>
  <pre><code>&lt;template&gt;
  &lt;v-card&gt;
      &lt;v-data-table :items=&quot;vacations&quot; :items-per-page=&quot;5&quot; :headers=&quot;headers&quot;&gt;
          &lt;template v-slot:[`item.action`]=&quot;{ item }&quot;&gt;
              &lt;v-icon
                  small
                  class=&quot;mr-2&quot;
                  @click=&quot;editVacation(item)&quot;
                  color=&quot;primary&quot;
              &gt;
                  mdi-pencil
              &lt;/v-icon&gt;
              &lt;v-icon
                  v-if=&quot;isAdmin&quot;
                  small
                  class=&quot;mr-2&quot;
                  @click=&quot;deleteVacation(item)&quot;
                  color=&quot;red&quot;
              &gt;
                  mdi-delete
              &lt;/v-icon&gt;
              &lt;v-icon
                  v-if=&quot;isAdmin&quot;
                  small
                  class=&quot;mr-2&quot;
                  @click=&quot;confirmVacation(item)&quot;
                  color=&quot;green&quot;
              &gt;
                  mdi-check
              &lt;/v-icon&gt;
          &lt;/template&gt;
      &lt;/v-data-table&gt;
  &lt;/v-card&gt;
  </code></pre>
  
  <p>And the script:</p>
  <pre><code>  props: {
          vacations: {
              type: Array,
              required: false,
              defaultValue: () =&gt; []
          }
      },
      data() {
          return {
              showCreateOrEditModal: false,
              headers: [
                  {
                      text: 'ID',
                      value: 'id',
                      sortable: false
                  },
                  {
                      text: 'User first name',
                      value: 'user.firstName',
                      sortable: false
                  },
                  {
                      text: 'User last name',
                      value: 'user.lastName',
                      sortable: false
                  },
                  {
                      text: 'Start date',
                      value: 'startDate',
                      sortable: false
                  },
                  {
                      text: 'End date',
                      value: 'endDate',
                      sortable: false
                  },
                  {
                      text: 'Confirmed',
                      value: 'confirmed',
                      sortable: false
                  },
                  { text: 'Actions', value: 'action', sortable: false }
              ]
          };
      },
      methods: {
          editVacation(vacation) {
              this.$emit('edit-vacation', vacation);
          },
  
          deleteVacation(vacation) {
              this.$emit('delete-vacation', vacation);
          },
  
          confirmVacation(vacation) {
              this.$emit('confirm-vacation', vacation);
          }
      },
      computed: {
          ...mapGetters({ isAdmin: 'isAdmin' })
         
  };
  &lt;/script&gt;
  </code></pre>
  <p>I tried to use v-if and create some function in the computed section, but unfortunately either the button does not display for any of the holidays, or it displays for all</p>