代码之家 › 专栏 › 技术社区 › ApplePie

如何将对象正确传递到Vue组件?

vue.js html javascript

ApplePie · 技术社区 · 6 年前

我最近正在学习Vue,我已经阅读了有关Vue的文档 components 是的。但是,我仍然不理解如何将数据对象传递给props并在组件模板中呈现它。

这是我的Jfiddle link

或者看看下面的代码。

Vue.component('greeting', {
  template: `<h1>{{index}}</h1>`,
  props: ['persons']
});

var vm = new Vue({
  el: '#app',
  data: {
    persons: {
      'Mike': 'Software Developer',
      'Nikita': 'Administrator Assistant'
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<div id="app">
  <greeting v-bind:persons="persons" v-for="(value,key,index) in persons"></greeting>
</div>

1 回复 | 直到 6 年前

zero298 6 年前

有几件事:

模板只能访问列出的道具,不能访问父作用域中的内容,这就是为什么 index 不可用
你会束缚 :person="value" 因为这是用当前迭代项填充的变量 persons
添加另一个道具“role”,以便可以绑定 person 反对

见下文:

Vue.component('greeting', {
  template: "<h1>{{person}} is a {{role}}</h1>",
  props: ['person', 'role']
});

var vm = new Vue({
  el: '#app',
  data: {
    persons: {
      'Mike': 'Software Developer',
      'Nikita': 'Administrator Assistant'
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
  <greeting :person="value" :role="key" v-for="(value, key, index) in persons" :key="index"></greeting>
</div>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

3 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前