Vue.js 3可选v-scroll-to

Question

这是我使用的代码。

<template>
  <div class="button-layout" :style="`margin: ${margin}; text-align: ${align};`">
    <component
      :is="buttonComponent"
      v-for="(button, index) in buttons.filter(btn => btn.url)"
      :key="button.label"
      :label="button.label"
      v-scroll-to="button.url"
      :style="`margin-left: ${index === 0 ? '' : space};`" />
    <component
      :is="buttonComponent"
      v-for="(button, index) in buttons.filter(btn => !btn.url)"
      :key="button.label"
      :label="button.label"
      :type="button.type"
      :style="`margin-left: ${index === 0 ? '' : space};`" />
  </div>
</template>

<script>
export default {
  name: "ButtonLayout",
  components: {  },
  props: {
    button: String,
    margin: String,
    align: String,
    space: String,
    buttons: Array
  },
  computed: {
    buttonComponent() {
      return () => import(`./button/${this.button}`)
    }
  }
};
</script>

我可以使用这两个对象结构列表，它可以正常工作。

[
    { url: '#video', label: lang.video },
    { url: '#info', label: lang.info }
]

[
    { type: 'reset', label: lang.clear },
    { type: 'submit', label: lang.send }
]

由于我不喜欢重复代码，因此我尝试根据列表中的第一个对象动态添加属性type和v-scroll-to，但是，它不起作用。最好的方法是什么？ （请参见下面的代码）

<template>
  <div class="button-layout" :style="`margin: ${margin}; text-align: ${align};`">
    <component
      :is="buttonComponent"
      v-for="(button, index) in buttons"
      :key="button.label"
      :label="button.label"
      v-bind:[optionalDirective.directive]="button[optionalDirective.key]"
      :style="`margin-left: ${index === 0 ? '' : space};`" />
  </div>
</template>

<script>
export default {
  name: "ButtonLayout",
  components: {  },
  props: {
    button: String,
    margin: String,
    align: String,
    space: String,
    buttons: Array
  },
  computed: {
    buttonComponent() {
      return () => import(`./button/${this.button}`)
    },
    optionalDirective(){
      if(this.buttons[0].url) {
        return {
          directive: 'v-scroll-to',
          key: 'url'
        }
      } else {
        return {
          directive: 'type',
          key: 'type'
        }
      }
    }
  }
};
</script>

Answer 1

您可以将一个对象传递给v-bind，它将基于该对象的键创建html属性。

这样的事情应该起作用