Vuejs 각 루프에 계산된 속성을 사용하는 방법

Vuejs 각 루프에 계산된 속성을 사용하는 방법

제 유스케이스는 이런 거지만

1. 객체 배열을 반복하여 드롭다운 메뉴를 채웁니다.
2. v-model 드롭다운을 선택하면 개체 ID 또는 이름만 가져올 수 있습니다.하지만 아이디와 이름을 동시에 얻을 수 있어요.
3. 따라서 선택한 개체의 ID를 찾기 위해 계산된 속성이 필요합니다.

이것은 나의 v-select입니다.

<v-select
                label="Select an item"
                :items="items"
                item-text="name"
                v-model="item_name">
                </v-select>

이것은 나의 계산된 속성입니다.

 computed: {
        id() {
          this.items.forEach(element => {
            if (element.name == this.item_name) {
              return (this.item = element.id);
            }
          });
        }

  }

제 계산속성에 무슨 문제가 생겼는지 {{item}}개의 아이템 ID가 출력될 것으로 예상되지만 출력되지 않습니다.

사용하실 수 있습니다.find()대신

computed: {
        id() {
          return this.items.find(element => {
            return element.name == this.item.name
          }).id;
        }

  }

그러면 먼저 함수의 조건과 일치하는 요소가 배열에서 검색되고 다음으로 해당 요소의 ID가 검색됩니다.

언급URL : https://stackoverflow.com/questions/51827441/vuejs-how-to-use-computed-properties-with-a-foreach-loop