Javascript 为什么Vue组件不会在选择更改时更新

我有一个表单，当选择框更改时，它会更改vue组件中的一些文本。我在JSFIDLE中创建了一个高度最小化的版本，以显示我遇到的问题：

HTML:

基本上，当我从下拉列表中选择女性或男性时，我的vue组件应该更新h标记以显示您的详细信息。当我选择夫妇，我的视图组件应该更新说她的详细信息和他的详细信息。但是，它并没有更新她的第一个索引，而是维护您的索引

看看JSFIDLE，您就会明白我的确切意思

---

只是想知道我做错了什么。我认为在组件中使用watcher是被动的。

如果道具值得到更新，您就不会在孩子的内部进行监视。 因此，每当道具数据发生变化时，您也需要在子组件中观察道具数据

看,

或计算属性

---

您使用了错误的引用：详图构件接收数据，但模板中的引用项无效

如果按以下方式更改模板：

<template id="details">
   <div>
     <h4>
         <span v-if="data.gender === 3 && index === 0">Her</span>
         <span v-else-if="data.gender === 3 && index === 1">His</span>     
         <span v-else>Your</span> 
         Health Details
     </h4>
     <div>Index: {{index}}</div>
     <div>Gender: {{data.gender}}</div>
   </div>
</template>

看到这一点就行了

---

这里的问题是，您在第一个细节对象中不知何故有性别1，因此得到的是您的而不是她。

问题是由代码的这一部分引起的：

  data() {
      return {
        item: {
          gender: this.data.gender
        }
      }
    }

当您将道具中的性别属性值指定给数据对象内的属性时，它会立即失去引用。因此，当数据道具更新时，它没有更新您的item.gender

如果您的目的只是将性别别名到一个名称较短的变量中以便于使用，则可以使用属性，该属性也将在每次更改数据时更新

computed: {
    item() {
      return this.data
    }
}

---

我通常喜欢使用计算属性而不是观看，我认为这样更干净。这样，您不必同时定义计算逻辑和存储结果的神奇位置。

computed:{
  item(){
    return this.data;
  }
}

<template id="details">
   <div>
     <h4>
         <span v-if="data.gender === 3 && index === 0">Her</span>
         <span v-else-if="data.gender === 3 && index === 1">His</span>     
         <span v-else>Your</span> 
         Health Details
     </h4>
     <div>Index: {{index}}</div>
     <div>Gender: {{data.gender}}</div>
   </div>
</template>

  data() {
      return {
        item: {
          gender: this.data.gender
        }
      }
    }

computed: {
    item() {
      return this.data
    }
}