Question

我想知道如何渲染两个引用同一对象中不同级别的html元素。

假设我有一个全局深层对象：

var sports = [{
   sportName: 'soccer',
   teams: [{
     teamName: 'TeamA'
     },
     {
     teamName: 'TeamB'
     }  
   ]
 },
 {
   sportName: 'basketball',
   teams: [{
     teamName: 'TeamC'
     },
     {
     teamName: 'TeamD'
     }  
   ]
 }

现在，我想要两个无序列表，它们代表该对象层次结构中的不同级别。

<ul id="sports">
  <li v-for:"sport in sports">
    <span>{{ sport.sportName }}</span>
  </li>
</ul> 

<script>
  var sportsList = new Vue({
    el:'#sports',
    data: {
      sports: sports
    }
  })
</script>

这是另一个列表，在应用程序的完全不同的部分：

<ul id="teams">
  <li v-for:"team in teams">
    <span>{{ team.teamName }}</span>
  </li>
</ul> 

<script>
  var sportsList = new Vue({
    el:'#teams',
    data: {
      teams: sports[sportName].teams
    }
  })
</script>

我的问题是这些：

1）在sports数据对象中呈现两个不同级别的单独实例是否仍会导致每个实例中的数据反应？

2）我注意到，只要我实例化第一个列表（sports），嵌套项（get）的set和teams就会存储在原型中......这引导我进入下一个问题。为teams实例化第二个Vue实例是否有意义，当它已在第一个实例化时？我发现很难在Vue中导航更深层次的对象:(

Answer 1

我认为最好的方法是使用计算机，而不是尝试将数组的某些部分复制到数据中，这可能会导致最终陷入混乱。因此，在你的情况下，我可以看到你正在努力让团队参加一项运动，所以我会设置一个计算器，让团队返回存储在数据中的运动：

  computed: {
    teams() {
      return this.sports.filter(sport => {
        return this.sportName === sport.sportName
      })[0].teams;
    }
  },

现在您需要做的就是设置一个名为sportName的数据属性，该过滤器可以对此做出反应，因此完整视图模型如下所示：

var app = new Vue({
  el: '#app',
  computed: {
    teams() {
      return this.sports.filter(sport => {
        return this.sportName === sport.sportName
      })[0].teams;
    }
  },
  methods: {
    setSport(name) {
      this.sportName = name;
    }
  },
  data: {
    sportName: 'basketball',
    sports: [{
      sportName: 'soccer',
      teams: [{
        teamName: 'TeamA'
      }, {
        teamName: 'TeamB'
      }]
    }, {
      sportName: 'basketball',
      teams: [{
        teamName: 'TeamC'
      }, {
        teamName: 'TeamD'
      }]
    }]
  }
});

这是JSFiddle：https://jsfiddle.net/hgw2upzf/

实例化深层对象并在其他实例中引用不同级别

1 个答案: