javascript - vuejs中简化数据和方法

Question

我想知道我们可以在这里简化数据和方法的使用，这样我们就不需要像这样一一定义了吗？我们可以使用迭代或其他方式吗？

export default {
  data() {
    return {
      key1 = false,
      key2 = false,
      key3 = false,
      .....
    }
  },
  methods:{
    onClick1 () {
      key1 = true
    },
    onClick2 () {
      key2 = true
    },
    onClick3 () {
      key2 = true
    },
    .....
  },
.....
}

组件上

<myComp @click="onClick1">One</myComp>
<myComp @click="onClick2">Two</myComp>
<myComp @click="onClick3">Three</myComp>
.....

任何帮助都会非常有帮助，在此先感谢!

Answer 1

首先，数据属性返回一个对象，所以你不能在那里定义变量。

data() {
    return {
      key1: false,
      key2: false,
      key3: false,
      ...
    }
  }

在某些情况下，您可以直接在点击事件上更改数据，例如:

<myComp @click="key1 = true">One</myComp>
<myComp @click="key2 = true">Two</myComp>
<myComp @click="key3 = true">Three</myComp>

这不是最佳做法，但在某些情况下会有所帮助。

在大多数情况下，您需要使用回调，例如“Majed Badawi”在此处制作的示例。