时间戳

首页 > 解决方案 > 在 VueJS 中通过组件和 v-for 渲染对象的键和值

javascript - 在 VueJS 中通过组件和 v-for 渲染对象的键和值

问题描述

本质上，我有一个对象，其键和值通过其他函数进行更改。 

app=new Vue({
    ...
    data:{
        myObject:{"key1":"value1","key2":"value2"}
    }
})

我编写了一个组件，将它们作为道具接收并显示它们。 

Vue.component("my-component",{
    props:['k','v'],
    template:`
        <div>{{k}}:{{v}}</div>
    `    
})

现在，当我写这个时：

<my-component v-for="(value,key) in myObject" v-bind:k="key" v-bind:v="value"></my-component>

app.myObject['someKey']='some value'即使在开发模式下，也不会执行任何操作并且没有任何控制台消息。
我哪里错了？或者有没有更好的方法通过组件渲染对象的键和值？

编辑：我观察到的东西，当对象已经填充到数据对象中时，它会完美呈现。但是，当外部函数修改它时，除非我修改对象中已经存在的键的值，否则不会反映更改。

编辑2： https ://jsfiddle.net/agentrsdg/xs635ndk/8/

标签： javascriptvuejs2

解决方案

在 Object 中循环子项，如下所示。

<div v-for="(value, key, index) in object">

所以对于你的代码。

<my-component
  v-for="(value, key) in myObject"
  v-bind:key-prop="key" // prop name in my-component is keyProp but use key-prop in the parent component
  v-bind:value-Prop="value"
/>

这是我的答案的JSFiddle。

推荐阅读