用v-for 渲染子组件时，第二个子组件没有值

Question

通过数据模型渲染页面时，用到v-for 发现第一个子组件有值，第二个子组件没有值，用watch 去打印子组件的值的时候也只打印了第一个值

相关代码

// 父组件

<section>
    <template v-for="(item,index) in model"  >
        <p class="info" :key="index+'-add'" v-if="index>0">
            新增主题{{index}}
            <i class="iconfont icon-remove" @click="removeSubject(index)"></i>
        </p>
      <subject :model="item" :key="index" :project="project"    :disabled=disabled  :meeting="meeting"></subject>
    </template> 
    <div v-if="showAdd" class="appendSubject">
        <button @click="appendSubject()" class="border gray">新增主题</button>
    </div>
</section>

//子组件
<template>
<div>

<p>{{this.model}}</p>
<selection 
:title="title" 
:placeholder="placeholder" 
:text="model.Title"
:data="items" 
:meeting="meeting"
label='Name'
:disable=disabled
@select="selectHandler" 
@close="closeHandler" 
:error="errorMessage"></selection>
</div>

</template>

父组件中打印的是model 如下

页面上也是有值的：

为啥新增主题1下面的主题input框是空的？以及为啥子组件里的watch model 只打印了一次

Answer 1

晚上才看到私信，因为给与的信息太少，我不清楚是你的代码有问题还是怎么样。只能凭借经验解释一下问题。

建议绝对不要用index 作为 key
可以简单看一下 React 等框架使用 index 做 key 的问题 稍微理解一下
具体的话需要对渲染更新以及diff算法有所了解

如果数据没有主键，可以看我的这篇博客 利用 WeakMap 对 Vue 新建数组中的对象赋予 :key

以及 知乎 Vue2.0 中 v-for里面的 “就地复用” 策略 是什么？

watch 为什么有可能打印出来一次，是因为在组件创建绑定时后不执行 需要添加 immediate
第一个触发可能时因为被 组件内部进行了 $emit change 而对数据进行了修改
vue watch api

当然也有 vue 是有依赖收集的，要么是整个数组没有被收集到,数组内部少一条数据这种相对而言是不太可能的发生的(也有可能Vue在特定情况下出bug了)

Answer 2

你打印对象的时候最好JSON.stringify一下 因为他是引用类型的..然后再看看 你是不是有什么删除的操作啊