将方法绑定到 vue.js 中组件中的选项

Question

我是 Vue 的新手，正在使用一个 litebox 组件，我想对其进行一些自定义，以便灯箱库根据按下的按钮从不同的图像开始。我已经通过使用我绑定到 litebox 组件中的一个选项的点击事件成功地解决了这个问题。因为我是 Vue 的新手。我只是想知道这是否是解决此类问题的好方法，或者是否有更好的方法？

<template>
  <div id>
    <button type="button" @click="show(); start1();">Show Litebox start 1</button>
    <button type="button" @click="show(); start2();">Show Litebox start 2</button>

    <vue-litebox v-if="showLitebox" :startAt="start" :items="images" @close="hide"></vue-litebox>
  </div>
</template>

<script>
import VueLitebox from "vue-litebox";

export default {
  components: { VueLitebox },
  data() {
    return {
      images: [
        "https://placekitten.com/400/400",
        "https://placekitten.com/400/401",
        {
          title: "My image title",
          src: "https://placekitten.com/400/402"
        }
      ],
      showLitebox: false,
      start: 0
    };
  },
  methods: {
    show() {
      this.showLitebox = true;
    },
    hide() {
      this.showLitebox = false;
    },
    start1() {
      this.start = 1
    },
    start2() {
      this.start = 2
    }
  }
};
</script>

这里是代码沙箱上的代码： https://codesandbox.io/s/9ok4y6lopo?fontsize=12

Answer 1

模板应该尽可能地无逻辑，此外，没有必要以这种方式链接方法，因为您始终可以将参数传递给方法，如下所示：

// in your template
<button
  type="button"
  @click="show(1)"
>
  Show Litebox start 1
</button>

// in methods section
show (start = 1) { // defaults to 1
  this.show = true;
  this.start = start;
}

顺便说一句，对于 vue-litebox 组件 (see documentation)，v-show 似乎比 v-if 更好。