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

我想知道如何呈现在同一对象中引用不同级别的两个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>

{{sport.sportName}


var sportsList=新的Vue({
el:“#体育”，
数据：{
运动：运动
}
})

下面是另一个列表，位于应用程序的完全不同部分：

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

{{team.teamName}


var sportsList=新的Vue({
el:'团队'，
数据：{
团队：运动[sportName]。团队
}
})

我的问题是：

1） 在

sports

数据对象中呈现两个不同级别的独立实例是否仍会导致每个实例中的数据反应

---

2） 我注意到，当我实例化第一个列表（运动）时，嵌套项（

teams

）的

get

和

set

存储在原型中。。。这就引出了下一个问题。当第二个Vue实例已经在第一个Vue实例中实例化时，为

团队

实例化第二个Vue实例有意义吗？我发现很难在Vue中导航更深的对象：（

我认为最好的方法是使用计算机，而不是试图将数组的一部分复制到数据中，这可能会导致您的结果有点混乱。因此，在您的情况下，我可以看到您正在尝试为一项运动获取团队，因此我将设置一个计算机，以返回存储在数据中的某项运动的团队：

  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'
      }]
    }]
  }
});

---

下面是JSFIDLE:

谢谢您的帮助。那么，您只实例化了一个应用程序？如果有大量其他HTML元素将这两个列表分开会怎么样？在更广泛的

app

instance/element中是否还有其他Vue元素？这是一个愚蠢的问题，但是

teams（）

与

teams:function（）

相同，可以在实例对象中使用吗？@Modermo是的，这是ES2015语法，因此您需要使用transpiler（例如）若要在浏览器中使用它，您可以坚持使用ES5语法。在回答其他问题时，您可以使用逐步构建应用程序。如果您不熟悉可用于快速构建应用程序的所有构建工具，并且像往常一样，如果遇到麻烦，您可以随时在此处寻求帮助。