Vue.js 템플릿에서 임시 변수를 정의하는 방법

Vue.js 템플릿에서 임시 변수를 정의하는 방법

현재 템플릿:

<a-droppable v-for="n in curSize" :key="n - 1" :style="{width: `${99.99 / rowLenMap[orderList[n - 1]]}%`, order: orderList[n - 1]}">
  <a-draggable :class="{thin: rowLenMap[orderList[n - 1]] > 10}">
    <some-inner-element>{{rowLenMap[orderList[n - 1]]}}</some-inner-element>
  </a-draggable>
</a-droppable>

문제는 내가 글을 써야 한다는 것이다.rowLenMap[orderList[n - 1]]vue.js 엔진도 여러 번 계산할까봐 걱정이다.

내가 원하는 건 이런 거야

<a-droppable v-for="n in curSize" :key="n - 1" v-define="rowLenMap[orderList[n - 1]] as rowLen" :style="{width: `${99.99 / rowLen}%`, order: orderList[n - 1]}">
  <a-draggable :class="{thin: rowLen > 10}">
    <some-inner-element>{{rowLen}}</some-inner-element>
  </a-draggable>
</a-droppable>

이런 걸 쓰면 어설프게 풀릴 수 있기 때문에 기술적으로 구현하는 것은 어렵지 않다고 본다.v-for="rowLen in [rowLenMap[orderList[n - 1]]]"그래서 어떤 간결하고 공식적인 해결책은 없을까?

나는 그것을 달성하기 위한 아주 간단한 (거의 마법적인) 방법을 찾았다. 단지 당신이 여러 번 사용하고 싶은 값을 가진 인라인(로컬) 변수를 정의하기만 하면 된다.

<li v-for="id in users" :key="id" :set="user = getUser(id)">
  <img :src="user.avatar" />
  {{ user.name }}
  {{ user.homepage }}
</li>

참고:set에 있어서 특별한 소품이 아니다.Vuejs그것은 단지 우리의 변수 정의의 자리 표시자로 사용된다.

Source: https://dev.to/pbastowski/comment/7fc9

CodePen: https://codepen.io/mmghv/pen/dBqGjM

---

업데이트 : @vir us의 의견을 기반으로 함

예를 들어 이벤트와 함께 사용할 수@click="showUser(user)" 평가 오히려 그것은 항상 마지막 평가된 사용자일 것이다. 왜냐하면user온도 변수는 루프의 모든 원에 재사용되고 교체된다.

따라서 이 솔루션은 컴포넌트 재렌더가 필요한 경우 변수를 다시 평가하기 때문에 템플릿 렌더링에만 적합하다.

그러나 이벤트와 함께 사용해야 하는 경우(권장하지는 않지만) 여러 변수를 동시에 보유하도록 외부 배열을 정의하십시오.

<ul :set="tmpUsers = []">
  <li v-for="(id, i) in users" :key="id" :set="tmpUsers[i] = getUser(id)" @click="showUser(tmpUsers[i])">
    <img :src="tmpUsers[i].avatar" />
    {{ tmpUsers[i].name }}
    {{ tmpUsers[i].homepage }}
  </li>
</ul>

https://codepen.io/mmghv/pen/zYvbPKv

크레딧 : @pay us

기본적으로 복제하는 것은 이치에 맞지 않지만users어레이, 데이터를 얻기 위해 값비싼 기능을 호출해야 하는 다른 상황에서는 유용할 수 있지만, 나는 당신이 사용하는 것이 더 낫다고 주장한다.computed그러면 어레이를 빌드할 속성.

템플릿으로 판단하건대, 승인된 답변에서 제시된 바와 같이 계산된 속성에 가장 적합할 것이다.

하지만, 질문 제목이 좀 더 넓기 때문에(그리고 구글에서 "Vue 템플릿의 변수"에 대해 상당히 높게 나오므로, 나는 좀 더 일반적인 대답을 제공하도록 노력할 것이다.

---

특히 배열의 모든 항목을 변환할 필요가 없다면 계산된 속성은 일종의 낭비가 될 수 있다.어린이 구성품 또한 특히 그것이 정말 작을 경우, 과잉 살상이 될 수 있다. (이것은 20% 템플릿, 20% 논리 및 60% 소품 정의 보일러가 될 것이다.)

내가 즐겨 사용하는 꽤 간단한 접근법은 작은 도우미 구성 요소다(일부러 부르자).<Pass>):

const Pass = {
  render() {
    return this.$scopedSlots.default(this.$attrs)
  }
}

이제 구성 요소를 다음과 같이 작성해 보십시오.

<Pass v-for="n in curSize" :key="n - 1" :rowLen="rowLenMap[orderList[n - 1]]" v-slot="{ rowLen }">
  <a-droppable :style="{width: `${99.99 / rowLen}%`, order: orderList[n - 1]}">
    <a-draggable :class="{thin: rowLen > 10}">
      <some-inner-element>{{rowLen}}</some-inner-element>
    </a-draggable>
  </a-droppable>
</Pass>

<Pass>범위 슬롯을 만들어 작업한다.Vue.js 설명서의 범위 슬롯에 대해 자세히 알아보거나 이 주제에 대해 쓴 dev.to 기사에서 위의 접근 방식에 대해 자세히 알아보십시오.

---

부록: Vue 3

Vue 3은 슬롯에 대한 접근 방식이 약간 다르다.첫째, 더<Pass>구성 요소 소스 코드는 다음과 같이 조정해야 한다.

const Pass = {
  render() {
    return this.$slots.default(this.$attrs)
  }
}

오늘 나는 이것이 필요했고 사용했다.<template>꼬리표를 붙이다v-for이것처럼.
나는 이 코드를 가지고

<ul>
  <li v-for="key in keys" 
      v-if="complexComputation(key) && complexComputation(key).isAuthorized">
    {{complexComputation(key).name}}
  </li>
</ul>

이것으로 변경

<ul>
  <template v-for="key in keys">
    <li v-for="complexObject in [complexComputation(key)]"
        v-if="complexObject && complexObject.isAuthorized">
      {{complexObject.name}}
    </li>
  </template>
</ul>

그리고 그것이 효과가 있었고 나는 이것이 가능한지 몰랐기 때문에 기분 좋게 놀랐다.

이것은 아동 구성요소의 완벽한 사용 사례처럼 보인다.당신은 단지 당신의 복잡한 계산가치를 구성요소에 속성으로 전달할 수 있다.

https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

<template>
  <div>
    <div v-for="item in itemsList" :key="item.id">
      {{ item.name }}

      <input v-model="item.description" type="text" />
      <button type="button" @click="exampleClick(item.id, item.description)">
        Click
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {
          id: 1,
          name: 'Name1',
        },
        {
          id: 2,
          name: 'Name2',
        },
      ],
    }
  },
  computed: {
    itemsList() {
      return this.items.map((item) => {
        return Object.assign(item, { description: '' })
      })
    },
  },
  methods: {
    exampleClick(id, description) {
      alert(JSON.stringify({ id, description }))
    },
  },
}
</script>

curSize배열이다.임시 값이 해당 암시적 배열로 구성됨sizedOrderList = curSize.map(n => orderList[n-1]). 만약 당신이 그것을 계산된 것으로 정의한다면,

<a-droppable v-for="n, index in sizedOrderList" :key="curSize[index]" :style="{width: `${99.99 / rowLenMap[n]}%`, order: n}">
  <a-draggable :class="{thin: rowLenMap[n] > 10}">
    <some-inner-element>{{rowLenMap[n]}}</some-inner-element>
  </a-draggable>
</a-droppable>

참조URL: https://stackoverflow.com/questions/43999618/how-to-define-a-temporary-variable-in-vue-js-template