Question

基本上，我有一个对象，其键和值可通过其他功能更改。

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'，即使在开发模式下也不会发生任何情况，也不会显示任何控制台消息。
我要去哪里错了？还是有更好的方法通过组件呈现对象的键和值？

编辑：我观察到的一点是，当对象已经填充到数据对象中时，它可以完美呈现。但是，当外部函数对其进行修改时，除非，否则修改不会反映出来。除非我修改了键的值，该值已经存在于对象中。

Edit2： https://jsfiddle.net/agentrsdg/xs635ndk/8/

Answer 1

为对象中的子项提供如下循环。

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

Answer 2

所以我认为我在github（https://github.com/vuejs/vue/issues/10611）上发现了一个错误和问题，他们很快就对解决方案做出了回应。以上无效是JavaScript本身的限制。因此，应该使用

app.$set(app.myObject,'newKey','newValue)

或

Vue.set(app.myObject,'newKey','newValue')

此处有更多详细信息：https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats

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

2 个答案: