Vue: Accessing prop to set class?

Question

I am using a pagination library ( https://github.com/arnedesmedt/vue-ads-pagination ) and the VueAdsPageButton has a hidden prop on it called active that is a boolean value depending on whether or not the button is active. I am trying to set the id based on whether or not the active prop is true so I can style it accordingly. I tried: v-bind:id="{ selected: active} but I get the warning that active is referenced in the render but doesn't exist. Not sure what I am doing wrong here. This is my code below:

<VueAdsPagination
    :total-items="totalOrdersNumber ? totalOrdersNumber : 0"
    :page="page"
    :loading="loading"
    :items-per-page="10"
    :max-visible-pages="10"
    @page-change="pageChange"
    @range-change="rangeChange"
>
  <template
      slot="buttons"
      slot-scope="props"
  >
      <VueAdsPageButton
          v-for="(button, key) in props.buttons"
          v-bind:id="{ selected: active}"
          :key="key"
          :page="page"
          v-bind="button"
          @page-change="page = button.page;"
      />
  </template>
</VueAdsPagination>

EDIT: here is the component code from the library for VueAdsPageButton

<template>
    <button
        :class="buttonClasses"
        :disabled="disabled"
        :title="title"
        @click="pageChange"
    >
        <i
            v-if="loading"
            class="fa fa-spinner fa-spin"
        />
        <span
            v-else
            v-html="html"
        />
    </button>
</template>

<script>
export default {
    name: 'VueAdsPageButton',
    props: {
        page: {
            type: [
                Number,
                String,
            ],
            required: true,
        },
        active: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        html: {
            type: String,
            required: true,
        },
        title: {
            type: String,
            default: '',
        },
        loading: {
            type: Boolean,
            default: false,
        },
        disableStyling: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        buttonClasses () {
            if (this.disableStyling)  {
                return {};
            }
            return {
                'focus:vue-ads-outline-none': true,
                'vue-ads-ml-1': true,
                'vue-ads-leading-normal': true,
                'vue-ads-w-6': true,
                'vue-ads-bg-teal-500': this.active,
                'vue-ads-text-white': this.active,
                'vue-ads-cursor-default': this.active || this.disabled,
                'vue-ads-bg-gray-200': this.disabled && this.page !== '...',
                'vue-ads-text-gray': this.disabled && this.page !== '...',
                'hover:vue-ads-bg-gray-100': !this.active && !this.disabled,
            };
        },
    },
    methods: {
        pageChange () {
            if (
                this.page === '...' ||
                this.disabled ||
                this.active
            ) {
                return;
            }
            this.$emit('page-change');
        },
    },
};
</script>

Please show your data as well, that's where active should be defined (unless it is itself a prop or a computed property). — Stephen Thomas
@Phil @stephen the active prop is not defined by me -- it's coming from the library I am using for that component. I will add the code from that library above. — burtonLowel

Diego Armando Maradona Diego Armando Maradona · Accepted Answer · 2019-08-14T22:01:34

You can bind custom id or class on active button like this:

<vue-ads-page-button
    v-for="(button, key) in props.buttons"
    :key="key"
    v-bind="button"
    :id="button.active ? 'some-id' : null"
    :class="{'some-class': button.active}"
    @page-change="page = button.page"
    @range-change="start = button.start; end = button.end"
/>

Here is also JSFiddle from library documentation where you can also see this - Link

Vue: Accessing prop to set class?

1 Answers