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

我是Vue的新手，正在使用一个litebox组件，我想对其进行一些自定义，以便lightbox gallery根据按下的按钮从不同的图像开始。我通过使用一个click事件成功地解决了这个问题，我正在将它绑定到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>

显示文本框开始1
显示文本框开始2
从“vue litebox”导入VueLitebox；
导出默认值{
组件：{VueLitebox}，
数据（）{
返回{
图像：[
"https://placekitten.com/400/400",
"https://placekitten.com/400/401",
{
标题：“我的图像标题”，
src:“https://placekitten.com/400/402"
}
],
showLitebox:false，
起点：0
};
},
方法：{
show（）{
this.showLitebox=true；
},
隐藏（）{
this.showLitebox=false；
},
start1（）{
这是1.start=1
},
start2（）{
这个.start=2
}
}
};

以下是代码沙盒上的代码：

---

模板应尽可能不受逻辑限制，此外，无需以这种方式链接方法，因为您始终可以向方法传递参数，如下所示：

// 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;
}

//在模板中
显示文本框开始1
//在方法部分
显示（开始=1）{//默认为1
this.show=true；
this.start=start；
}

---

顺便说一句，对于vue litebox组件（），v-show似乎比v-if更好。

模板应尽可能不受逻辑限制，此外，不需要以这种方式链接方法，因为您可以始终将参数传递给方法，如下所示：

// 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;
}

//在模板中
显示文本框开始1
//在方法部分
显示（开始=1）{//默认为1
this.show=true；
this.start=start；
}

---

顺便说一句，对于vue litebox组件（），v-show似乎比v-if更好。

一般的

@单击
方法是好的，但链式方法（使用
；
）则不是这样。为什么不改为先显示（x）
，然后在
显示
中执行
this.start=x
？一般的
@点击
方法是好的，但链式方法（使用
；
）则不是这样。为什么不改为先显示（x）
，然后在
显示中执行
this.start=x
？谢谢您的解决方案！事实上，由于某种原因，v-show在这种情况下不起作用，所以我需要v-if。您可以通过打开和关闭不同的图像在代码沙盒上进行更改来进行测试。感谢您的解决方案！事实上，由于某种原因，v-show在这种情况下不起作用，所以我需要v-if。您可以通过在代码沙盒上打开和关闭不同的图像来进行测试。