vuej에서 데이터 및 방법 단순화

vuej에서 데이터 및 방법 단순화

여기서 데이터 및 방법을 단순화할 수 있는지 알고 싶습니다.이렇게 일일이 정의할 필요가 없습니다.반복이나 다른 방법을 사용할 수 있습니까?

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

어떤 도움이라도 주시면 감사하겠습니다!

첫째, 데이터 속성은 개체를 반환하므로 변수를 정의할 수 없습니다.

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"가 만든 예시와 같은 콜백을 사용해야 합니다.

의 정의keys에 반대하다.data범용 함수onClick에methods특정 키 값을 true로 설정하려면:

export default {
  data() {
    return {
      keys: { 1: false, 2: false, 3: false }
    }
  },
  methods:{
    onClick (key) {
      this.keys[key] = true
    }
  }
}

컴포넌트에서 다음과 같이 키를 전달합니다.

<myComp @click="() => onClick(1)">One</myComp>
<myComp @click="() => onClick(2)">Two</myComp>
<myComp @click="() => onClick(3)">Three</myComp>

어레이를 다음과 같이 루프할 수 있습니다.

주의: 사용this.$setdom의 배열 값도 업데이트합니다.

new Vue({
  el: '#app',
  data() {
    return {
      keys: [false, false, false, false, false]
    }
  },
  methods: {
    onClick(index) {
      this.$set(this.keys, index, true)
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='app'>
  <div v-for="(item,index) in keys" @click="() =>  onClick(index)">Index-{{index}}</div>
  <pre> {{keys}}</pre>
</div>

언급URL : https://stackoverflow.com/questions/70606925/simplify-data-and-method-in-vuejs