VueJs - Conditionaly showing elements in table

Question

I have pretty simple table of users here with only 4 cols, and i want to show a button for each user depending on his status 'isActive'. If user is active i want to show button with text 'disable' and vice versa. I am little bit stuck with this because i dont have an idea how can i show these buttons, because i am using vuexy template for this project(admin panel). Is there a way to do this with JSX? Please take a look at code, i am getting data from mysql with nodejs. Ask me if you need more info. Thanks.

<template>
<div>
  <div class="container">
    <b-card-text class="mb-2">
      <div
        v-if="showLoginError"
        class="text-center bg-danger colors-container rounded text-white width-360 height-50 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow"
      >
        <span>{{ loginError }}</span>
      </div>
    </b-card-text>
    <b-card-text class="mb-2">
      <div
        v-if="showSuccessMessage"
        class="text-center bg-success colors-container rounded text-white width-360 height-50 d-flex align-items-center justify-content-center mr-1 ml-50 my-1 shadow"
      >
        <span>{{ successMessage }}</span>
      </div>
    </b-card-text>
    <section id="card-actions" class="input-section">
      <b-row>
        <b-col cols="8">
          <b-card-actions ref="cardAction">
            <validation-observer ref="simpleRules">
              <b-form>
                <b-row>
                  <b-col md="6">
                    <b-form-group>
                      <validation-provider
                        #default="{ errors }"
                        name="First Name"
                        rules="required"
                      >
                        <b-form-input
                          v-model="name"
                          :state="errors.length > 0 ? false:null"
                          placeholder="Twitter username"
                        />
                      </validation-provider>
                    </b-form-group>
                  </b-col>
                  <b-col cols="12">
                    <b-button
                      variant="primary"
                      type="submit"
                      @click.prevent="validationForm"
                    >
                      Submit
                    </b-button>
                  </b-col>
                </b-row>
              </b-form>
            </validation-observer>
          </b-card-actions>
        </b-col>
      </b-row>
    </section>
    // This is table
    <b-table responsive="sm" :items="items"/>
  </div>
</div>
</template>

<script>
import { ValidationProvider, ValidationObserver } from 'vee-validate'
import {
  BFormInput, BFormGroup, BForm, BRow, BCol, BButton, BTable,
} from 'bootstrap-vue'
import { required } from '@validations'
import axios from 'axios'
import { getUserToken } from '@/auth/auth'

export default {
  components: {
    ValidationProvider,
    ValidationObserver,
    BFormInput,
    BFormGroup,
    BForm,
    BRow,
    BCol,
    BButton,
    BTable,
  },
  data() {
    return {
      name: '',
      successMessage: '',
      showSuccessMessage: false,
      loginError: '',
      showLoginError: false,
      required,
      items: [],
    }
  },
  beforeMount() {
    this.getAllUsers()
  },
  methods: {
    getAllUsers() {
      const API_URL = `${this.$server}/api/twitter/allusers`
      const params = {
        token: getUserToken(),
      }
      axios.post(API_URL, null, { params }).then(res => {
        if (res.data) {
          res.data.forEach(element => {
            let isActive = 'active'
            if (element.isActive === 0) {
              isActive = 'disabled'
            }
            const arr = {
              twitter_name: element.twitter_name,
              twitter_username: element.twitter_username,
              twitter_id: element.twitter_id,
              userActive: isActive,
            }
            this.items.push(arr)
          })
        }
      })
    },
    validationForm() {
      const API_URL = `${this.$server}/api/twitter/adduser`
      const params = {
        twitter_username: this.name,
        token: getUserToken(),
      }
      axios.post(API_URL, null, { params }).then(res => {
        if (res.data.success) {
          this.successMessage = res.data.message
          this.showSuccessMessage = true
          // Hide message after 5sec
          setTimeout(() => {
            this.successMessage = ''
            this.showSuccessMessage = false
          }, 5000)
        } else {
          this.loginError = res.data.message
          this.showLoginError = true
          // Hide message after 5sec
          setTimeout(() => {
            this.loginError = ''
            this.showLoginError = false
          }, 5000)
        }
      })
    },
  },
}
</script>

CocoBagarre · Accepted Answer · 2022-04-19 12:46:27Z

1

I'm a little bit confused, where do you want to show your button ? If it's in the table, you can use the custom templation of Bootstrap-Vue, you'll find the doc here with an example : https://bootstrap-vue.org/docs/components/table#custom-data-rendering

EDIT: here an example for your case

    <b-table responsive="sm" :items="items">
        <template #cell(userActive)="data">
            <b-button v-if="data.userActive">Disabled</b-button>
            <b-button v-else>Enabled</b-button>
        </template>
    </b-table>

edited Apr 19, 2022 at 12:46

answered Apr 19, 2022 at 9:55

CocoBagarre

1,1261 gold badge8 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Edin Osmic Over a year ago

I would like to add button in existing column. ``` const arr = { twitter_name: element.twitter_name, twitter_username: element.twitter_username, twitter_id: element.twitter_id, userActive: isActive, } this.items.push(arr) ``` These are four cols that i have, now i would like to somehow show button inside userActive col, and onclick toggle isActive...

CocoBagarre Over a year ago

Did you watch the custom data rendering from the link above ?

Edin Osmic Over a year ago

Yes i did, i added fields array in data as it says in docs and passed in the table like this ':fields="fields"', but its not working for some reason. It removes everything else from items array(data i am getting from mysql)

CocoBagarre Over a year ago

Fields must be an array like ['twitter_name', 'twitter_username', 'twitter_id', 'userActive']

Edin Osmic Over a year ago

I was using it as suggested in docs but still items array was not showing. But what solved my problem is that i added everyhing i need in fields array, worked good. Like this: fields: [ { key: 'name', label: 'Twitter Name' }, { key: 'username', label: 'Twitter Username' }, { key: 'id', label: 'Twitter ID' }, { key: 'status', label: 'Status' }, ]

Collectives™ on Stack Overflow

VueJs - Conditionaly showing elements in table

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related