Question

我有一个child组件，它接受todo个对象。

＆＃13;

Vue.component('child', {
      props: ['todo'],
      template: '<span>{{ todo.text }}</span>'
    })
    
    var vm = new Vue({
      el: '#box',
      data: {
        todo: {
          text: 'Study English',
          isComplete: false
        }
      }
    })

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>


</head>
<body>

<div id="box">
  <child v-bind="todo"></child>
</div>


<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

＆＃13;

todo.text为Study English，但未显示。为什么它不显示数据？

Answer 1

您没有绑定任何内容，因为您没有将道具名List<Tuple<string, int>> countPerType = db1.Audits .OrderBy(p => p.CreatedBy) .GroupBy(o => new { o.Type, o.CreatedBy }) .ToList() .Select(g => new Tuple<string, int>(g.Select(f => f.CreatedBy + ',' + f.Type).FirstOrDefault(), (int?)g.Count() ?? 0)) .ToList();传递给孩子。

todo

应该是

<child v-bind="todo"></child>

或者，您可以使用下面的简写方法

<child v-bind:todo="todo"></child>

通过传递<child :todo="todo"></child>对象，您现在可以像在子组件中一样使用todo。

This doc应该有所帮助。

Answer 2

将对象绑定到组件：

 <child v-bind="todo"></child>

和对象todo数据是这样的：

todo: {
    text: 'Study English',
    isComplete: false
}

等于：

 <child v-bind:text='Study English' v-bind:isComplete=false ></child>

在您的组件中，prop应该是这样的：

props: ['text', 'isComplete']

否则，您可以像todo一样传递v-bind:todo="todo"。

使用prop传递一个对象，但没有得到该值

2 个答案: