Vue：访问道具以设置课程？

Question

我正在使用分页库 (https://github.com/arnedesmedt/vue-ads-pagination)，VueAdsPageButton 上有一个名为 active 的隐藏道具，它是一个布尔值，取决于按钮是否处于活动状态。我正在尝试根据active 属性是否为真来设置id，以便我可以相应地设置它的样式。我试过了： v-bind:id="{ selected: active} 但我收到警告，active 在渲染中被引用但不存在。不知道我在这里做错了什么。 这是我下面的代码：

<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>

编辑： 这是库中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>

Answer 1

您可以像这样在活动按钮上绑定自定义 id 或类：

<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"
/>

这里也是库文档中的 JSFiddle，您也可以在其中看到 - Link