首页 > 解决方案 > 为什么 Vue 组件不会在选择更改时更新

问题描述

I have a form that changes some text within a vue component when a select box is changed. 我在 jsfiddle 中创建了一个高度最小化的版本来显示我遇到的问题:

https://jsfiddle.net/ywaug7ft/

HTML:

<div id="app">
<h5>Select a gender</h5>
  <select v-model="gender">
    <option disabled="disabled" value>Select...</option>
    <option value="1">Male</option>
    <option value="2">Female</option>
    <option value="3">Couple</option>
  </select>
  <div></div>
  <detail-component v-for="(detail, index) in details" :data="detail" :index="index"></detail-component>

  {{details}}
</div>

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

视图:

Vue.component('detail-component', {
  template: '#details',
  props: ['data', 'index'],
  data() {
    return {
      item: {
        gender: this.data.gender
      }
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    gender: '',
    details: [],
    options: {
        gender: {
        "1": "Single Female",
        "2": "Single Male",
        "3": "Couple"
      }
    }
  },
  watch: {
    gender: function(val) {
      this.details = [];
      if (val == 1) {
        this.details.push({gender: 1});
      } else if (val == 2) {
        this.details.push({gender: 2});
      } else if (val == 3) {
        this.details.push({gender: 3}, {gender: 3});
      }
    }
  }
});

基本上,当我从下拉列表中选择female或时male,我的 vue 组件应该将 h 标签更新为Your Details. 当我选择 时couple,我的视图组件应该更新为说Her Detailsand His Details。但是,它不会将第一个索引更新为,Her而是保持Your.

看看 jsfiddle,你就会明白我的意思。

只是想了解我做错了什么。我认为使用 watcher 会在组件中产生反应。

标签: javascriptvue.jsvuejs2vue-component

解决方案


如果道具值正在更新,您就不会在孩子内部观察。
因此,每当道具data发生变化时,您也需要watch在子组件中对其进行更改。

小提琴

watch:{
  data(val){
    this.item.gender=val.gender
  }
}

或计算属性Fiddle

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

推荐阅读