Question

将数据分组到嵌套对象属性中很方便。通过这样做，我们不必将数据字段中的属性收集到实体中供以后使用。如下例所示，

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”前缀真的有点过分。如果有大量的level3字段，这将非常麻烦。

我想知道是否有任何方法可以一次又一次地保存输入level1.level2的工作。模板是否有任何语法，以便某些部分在“level1.level2”的范围内？ Vue是否提供任何支持，以便在这种情况下假定前缀“level1.level2”？

Answer 1

有几种选择。

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

Answer 2

有塞尔维尔方式： 1.使用获得相同级别的方法

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

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

使用v-for v-for docu

示例：

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

绑定到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>

Answer 3

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

在Vue模板中访问嵌套对象属性的更简单方法是什么？

3 个答案: