계산된 속성을 Vue 구성 요소에 동적으로 삽입할 수 있습니까?

계산된 속성을 Vue 구성 요소에 동적으로 삽입할 수 있습니까?

대규모 객체 배열을 반복하여 Vue 컴포넌트의 내용을 생성하고 있습니다.계산된 속성을 사용하여 특정 노드를 표시할지 여부를 결정하고 싶지만 계산된 참조는 루프 내에서 사용되므로 참조 이름을 동적으로 설정할 수 있어야 합니다.

다음은 제가 하려는 일의 개념적인 예입니다.어떻게 하면showItemX현재 항목을 기준으로 변경하시겠습니까?

<template>
  <ul>
    <li v-for="item in myArr" v-if="showItemX">
      {{ item.name }}
    </li>
  </ul>
</template>
<script>
  export default {
    data() {
      return {
        myArr: [{
          id: 'item1',
          name: 'Item 1'
        }, {
          id: 'item2',
          name: 'Item 2'
        }]
      };
    },
    computed: {
      showItem1: function() {
        return this.$store.state.showItem1;
      },
      showItem2: function() {
        return this.$store.state.showItem2;
      }
    }
  }
</script>

2가지 가능한 해결책

다음 두 가지 경로를 검토했습니다만, 어느 쪽이 더 효율적일지, 다른 방법이 더 좋은지 잘 모르겠습니다.

1. 계산된 속성에 대해 단일 개체를 반환합니다.

이 옵션에서는 위의 두 가지 계산된 속성이 하나의 속성으로 결합됩니다.

computed: {
  showItem: function() {
    return {
      item1: this.$store.state.showItem1,
      item2: this.$store.state.showItem2
    }
  }
}

그리고 그 다음에v-if로 설정될 것이다showItem[item.id]:

<li v-for="item in myArr" v-if="showItem[item.id]">
  {{ item.name }}
</li>

여기서 단점은 의존관계 중 하나가 변경될 때마다 개체 전체가 재계산되는 것처럼 보인다는 것입니다.

2. 대응하는 계산 속성을 취득하는 방법을 사용한다.

여기서 패스해 봤어item.id해당 계산 속성에 액세스하기 위한 방법으로 메서드에 액세스합니다.

computed: {
  item1Show: function() {
    return this.$store.state.showItem1;
  },
  item2Show: function() {
    return this.$store.state.showItem2;
  }
},
methods: {
  showItem: function(id) {
    return this[id + 'Show']
  }
}

템플릿에서 다음을 수행합니다.

<li v-for="item in myArr" v-if="showItem(item.id)">
  {{ item.name }}
</li>

이 예에서는 계산된 속성을 완전히 활용하고 있는지 잘 모르겠습니다.

---

이러한 옵션 중 하나를 다른 옵션보다 선호해야 합니까? 아니면 제가 놓치고 있는 더 나은 방법을 찾을 수 있을까요?

Vue와 JavaScript의 장점은 요구에 맞는 접근 방식을 사용할 수 있다는 것입니다만, 아마 다음과 같은 이해하기 쉬운 방법을 찾을 수 있을 것입니다.

<li v-for="item in myArr" v-if="showItem(item)">
    {{ item.name }}
</li>

그리고 나서,showItem방법, 예:

showItem(item) {
    return item.id === "item1" ?
        this.$store.state.showItem1 :
        this.$store.state.showItem2;
}

즉, 포스트에 표시되어 있지 않은 곳에서 계산된 속성을 사용하고 있지 않다고 가정합니다.

더 좋은 방법이 있어

가능한 솔루션 #1에 대해서는 다음 작업을 수행하는 것이 좋습니다.

<li v-for="(item, index) in myArr" v-if="$store.state['showItem' + (index + 1)]">

가능한 솔루션 #2: Vue의 최적화를 완전히 놓치고 있습니다.이 메서드는 계산 부하가 높지 않지만 각 렌더링 요소에 대해 다시 실행됩니다.

다음은 예제 문제의 특정 매개 변수에 맞는 솔루션입니다.하지만 실제로 여기서 추천하는 것은 아닙니다.더 아래.

<template>
      <ul>
        <!--
          `:key` is crucial for performance.
          otherwise, every element will re-render 
          whenever the filtered array updates.
        -->
        <li v-for="item in myFilteredArr" :key="item.id">
          {{ item.name }}
        </li>
      </ul>
</template>

<script>
  export default {
    data: _ => ({
      myArr: [
        {
          id: 'item1',
          name: 'Item 1'
        }, 
        {
          id: 'item2',
          name: 'Item 2'
        }
      ],
    }),

    computed: {
      myFilteredArr () {
        /* 
          abstracting state to a constant avoids 
          re-running the getter functions each iteration
        */
        const state = this.$store.state;
        return this.myArr.filter(
          (item, index) => state['showItem' + (index + 1)]
        );
      }
    }

  }
</script>

이 모든 논리를 Vuex getter로 옮기는 것이 좋습니다.https://vuex.vuejs.org/guide/getters.html 를 참조해 주세요.

되고 있기 에 모든 는 이 을 사용합니다.showItem Vuex getter가 반환됩니다.myFilteredArr위와 같은 방법으로

이렇게 하면 스토어 상호의존성이 없어져 스토어 상태가 훨씬 깨끗해집니다.

언급URL : https://stackoverflow.com/questions/52583399/can-i-insert-a-computed-property-into-a-vue-component-dynamically