Vue. js 3 необязательный v-scroll-to - PullRequest
Новая
       9

Vue. js 3 необязательный v-scroll-to

0 голосов
/ 15 апреля 2020

Вот код, который я использую. 

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

Ответы [ 2 ]

0 голосов
/ 15 апреля 2020

Поскольку v-scroll-to нельзя привязать к v-bind, я обнаружил небольшую работу, которая фактически решает мою проблему и избегает дублирования кода дважды. Я связываю @click с методом, который проверяет значение url и $scollTo при необходимости, и это решает мою проблему. 

<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="type(button.type)"
      @click="scrollTo(button.url)"
      :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
  },
  methods: {
    type(type) {
      return type ? { type } : {}
    },
    scrollTo(url) {
      if (url) this.$scrollTo(url)
    }
  },
  computed: {
    buttonComponent() {
      return () => import(`./button/${this.button}`);
    }
  }
};
</script>
0 голосов
/ 15 апреля 2020

Вы можете передать объект в v-bind, и он создаст html атрибуты на основе ключей объекта.

Примерно так должно работать 

<component
      :is="buttonComponent"
      v-for="(button, index) in buttons"
      :key="button.label"
      :label="button.label"
      v-bind="{[button.url ? 'v-scroll-to' : 'type' ] : (button.url || button.type} }"
      :style="`margin-left: ${index === 0 ? '' : space};`" />

Или вы может объявить новый метод, который возвращает требуемый объект 

methods: {
  buttonDirective (button) {
   if (button.url) {
     return {
       'v-scroll-to': button.url
     }
   } else {
     return {
       'type': button.type
     }
   }
  }
}

, а затем вызвать его в component

<component
      :is="buttonComponent"
      v-for="(button, index) in buttons"
      :key="button.label"
      :label="button.label"
      v-bind="buttonDirective(button)"
      :style="`margin-left: ${index === 0 ? '' : space};`" />
...