Question

这让我发疯，我在数组中嵌套数据并且没有成功地使用组件进行渲染，但是我能够在没有组件的情况下渲染它。

ArrayList

我要做的是循环成员，这是我当前的代码

的index.html

var data2 = {
    "team": [{
        "id":0,
        "author": "Johnnie Walker",
        "title": "Aging Your Own Whisky",
        "content": "A bunch of steps and a whole lot of content",
        "members": [
            {
              "id": "0",
              "name": "name 1",
              "text": "bio"
            },
            {
              "id": "1",
              "name": "name 2",
              "text": "bio"
            }
            ]
        },
        {
        "id":1,
        "author": "Captain Morgan",
        "title": "Rum stories",
        "content": "A bunch of steps and a whole lot of contentttt",
        "members": [
            {
              "id": "3",
              "name": "name 3",
              "text": "bio"
            }
            ]               
        }               
    ]}

这是我的js文件

<div id="app2">
    <entry v-for="t in team" v-bind:cat="t" v-bind:key="t.id">
        <detail v-for="mem in t.members" v-bind:ember="mem" v-bind:key="mem.id"></detail> 
    </entry>
</div>

条目中的数据呈现但细节没有任何反应，也没有警告，我该如何处理？

注意：当我以这种方式接近它时，它可以工作，但这不是使用组件：

    Vue.component('entry', {
        props:['cat'],
        template: '<div>{{cat.author}}</div>'
    })

    Vue.component('detail', {
        props:['ember'],
        template: '<div>{{ember.id}}</div>',
    })

    var vm2 = new Vue({
        el: '#app2',
        data: function() {
            console.log(data2.team)
            return data2;
        }           
    });

和html

    var vm = new Vue({
        el: '#app',
        data: function() {
            console.log(data2.team)
            return data2;
        }           
    });

Answer 1

您需要将detail组件添加到entry模板，或者需要向entry组件添加一个插槽。

以下是修改后使用插槽的代码。

console.clear()
var data2 = {
  "team": [{
      "id": 0,
      "author": "Johnnie Walker",
      "title": "Aging Your Own Whisky",
      "content": "A bunch of steps and a whole lot of content",
      "members": [{
          "id": "0",
          "name": "name 1",
          "text": "bio"
        },
        {
          "id": "1",
          "name": "name 2",
          "text": "bio"
        }
      ]
    },
    {
      "id": 1,
      "author": "Captain Morgan",
      "title": "Rum stories",
      "content": "A bunch of steps and a whole lot of contentttt",
      "members": [{
        "id": "3",
        "name": "name 3",
        "text": "bio"
      }]
    }
  ]
}
Vue.component('entry', {
  props: ['cat'],
  template: '<div>{{cat.author}}<slot/></div>'
})

Vue.component('detail', {
  props: ['ember'],
  template: '<div>{{ember.id}}</div>',
})

var vm2 = new Vue({
  el: '#app2',
  data: function() {
    console.log(data2.team)
    return data2;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app2">
  <entry v-for="t in team" v-bind:cat="t" v-bind:key="t.id">
    <detail v-for="mem in t.members" v-bind:ember="mem" v-bind:key="mem.id">
    </detail>
  </entry>
</div>

此处它正在修改条目组件以包含详细信息。

console.clear()
var data2 = {
  "team": [{
      "id": 0,
      "author": "Johnnie Walker",
      "title": "Aging Your Own Whisky",
      "content": "A bunch of steps and a whole lot of content",
      "members": [{
          "id": "0",
          "name": "name 1",
          "text": "bio"
        },
        {
          "id": "1",
          "name": "name 2",
          "text": "bio"
        }
      ]
    },
    {
      "id": 1,
      "author": "Captain Morgan",
      "title": "Rum stories",
      "content": "A bunch of steps and a whole lot of contentttt",
      "members": [{
        "id": "3",
        "name": "name 3",
        "text": "bio"
      }]
    }
  ]
}


Vue.component('detail', {
  props: ['ember'],
  template: '<div>{{ember.id}}</div>',
})

Vue.component('entry', {
  props: ['cat'],
  template: `<div>
    {{cat.author}}
    <detail v-for="mem in cat.members" v-bind:ember="mem" v-bind:key="mem.id">
    </detail>
    </div>`
})


var vm2 = new Vue({
  el: '#app2',
  data: function() {
    return data2;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app2">
  <entry v-for="t in team" v-bind:cat="t" v-bind:key="t.id"></entry>
</div>

具有嵌套数据的Vue js组件

1 个答案: