Vue 템플릿에서 중첩된 개체 속성에 쉽게 액세스할 수 있는 방법이 있습니까?

Vue 템플릿에서 중첩된 개체 속성에 쉽게 액세스할 수 있는 방법이 있습니까?

데이터를 중첩된 개체 속성으로 그룹화하는 것이 편리합니다.이렇게 하면 나중에 사용하기 위해 데이터 필드의 속성을 엔티티에 수집할 필요가 없습니다.다음 예시와 같이

var demo = new Vue({
	el: '#demo',
        data: {
  	  level1: {
    	    level2: {
      	      level3_1: 'Hello',
              level3_2: 'world'
            }
          }
        }
})

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

<div id="demo">
  <div class="person">
    <h3>{{ level1.level2.level3_1 }}</h3>
    <p>{{ level1.level2.level3_2 }}</p>
  </div>
</div>

단, level3_x 필드에 도달하기 위해 "level1.level2" 프리픽스를 입력해야 하는 것은 매우 오버킬입니다.레벨 3 필드가 로딩되어 있으면 매우 번거롭습니다.

level1.level2를 반복해서 입력하는 작업을 저장할 수 있는 방법이 없을까요?템플릿에 "level1.level2"의 범위에 포함되는 구문이 있습니까?Vue는 이 경우 "level1.level2"라는 프레픽스를 상정할 수 있도록 지원을 제공하고 있습니까?

몇 가지 옵션이 있습니다.

1. 사용v-for

안에 있는 모든 것v-for블록은 반복하는 수준까지 범위가 지정됩니다.다음과 같이 합니다.

var demo = new Vue({
	el: '#demo',
        data: {
  	  level1: {
    	    level2: {
      	      level3_1: 'Hello',
              level3_2: 'world'
            }
          }
        }
})

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

<div id="demo">
  <div class="person">
    <template v-for="(l2prop, l2propName) in level1">
        <h3>{{ l2prop.level3_1 }}</h3>
        <p>{{ l2prop.level3_2 }}</p>
    </template>
  </div>
</div>

2. 컴포넌트를 사용한다.

컴포넌트는 부모 데이터의 서브셋을 취득하기 때문에 자동으로 범위가 지정됩니다.다음과 같이 합니다.

Vue.component( "person", {
    props: ['data'],
    template: '<div class="person"><h3>{{ data.level3_1 }}</h3><p>{{ data.level3_2 }}</p></div>'
});

var demo = new Vue({
	el: '#demo',
        data: {
  	  level1: {
    	    level2: {
      	      level3_1: 'Hello',
              level3_2: 'world'
            }
          }
        }
})

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

<div id="demo">
  <person v-bind:data="level1.level2"></person>
</div>

serval 방법 1이 있습니다.동일한 수준을 얻는 방법 사용

methods:{
  getLvl3: function(nr){
  return this["level"+nr]["level"+nr]["level3_"+nr];
}

<h3>{{ getLvl3(1) }}</h3>

2. 을 반복하다v-for v-for 문서

예:

<div id="demo">
  <div class="person">
    <template v-for="(lvl2, key) in level1">
      <template v-for="(lvl3, key) in lvl2">
        <h3 v-if="key === 'level3_1'>{{ lvl3 }}</h3>
        <p v-if="key === 'level3_2'">{{ lvl3 }}</p>
      </template>
    </template>        
  </div>
</div>

3. vue 외부에서 정의된 변수에 바인딩:

   var nested = { level1: { level2: { level3_1: 'Hello', level3_2: 'world' }}

vue 구성 요소 또는 인스턴스 내부:

data:{ 
  level2: nested.level1.level2,
}

<div id="demo">
  <div class="person">
    <h3>{{ level2.level3_1 }}</h3>
    <p>{{ level2.level3_2 }}</p>
  </div>
</div>

@jason-smith의 예는 거의 맞다. v-for는 배열 또는 목록에 사용됩니다.그것을 작동시키기 위해서는 당신의 대상을 목록에 넣는 것이 필요하다.

그의 사례를 따르면 더 나은 접근법은

var demo = new Vue({
  el: '#demo',
  data: {
    level1: {
      level2: {
        level3_1: 'Level 3_1',
        level3_2: 'Level 3_2'
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="person">
    <template v-for="level2Obj in [level1.level2]">
        <h3>{{ level2Obj.level3_1 }}</h3>
        <p>{{ level2Obj.level3_2 }}</p>
    </template>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/46128557/any-easier-way-to-access-nested-object-properties-in-vue-template