선택 변경 시 Vue 구성 요소가 업데이트되지 않는 이유

선택 변경 시 Vue 구성 요소가 업데이트되지 않는 이유

선택 상자를 변경할 때 vue 구성 요소 내의 일부 텍스트를 변경하는 폼이 있습니다.현재 발생하고 있는 문제를 나타내기 위해 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:

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 Details그리고.His Details그러나 첫 번째 인덱스는 업데이트되지 않습니다.Her대신 유지하다Your.

jsfiddle을 보면 정확히 무슨 뜻인지 알 수 있을 거예요.

그냥 내가 뭘 잘못하고 있는지 이해하려고 하는 거야저는 워처를 사용하면 컴포넌트에서 반응하는 줄 알았어요.

소품 값이 업데이트되는지 여부를 자녀 내부에서 감시하고 있지 않습니다.
그래서 여기 소품들이data필요한 변경watch자 컴포넌트에서도 마찬가지입니다.

바이올린을 보다

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

또는 계산된 속성 Fielen.

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

잘못된 참조를 사용하고 있습니다.detail-component수신하다data하지만 당신의 레퍼런스는item템플릿에 추가해 주세요.

템플릿을 다음과 같이 변경하는 경우:

<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이 있어서 "Her"가 아닌 "Your"가 나왔다는 것입니다.

이 문제는 코드의 다음 부분으로 인해 발생합니다.

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

값을 할당한 경우gender당신의 소품에서 내부 재산으로data()오브젝트는 즉시 참조를 잃습니다.그래서 언제?data소품이 업데이트되었지만 업데이트되지 않았습니다.item.gender.

만약 당신의 목적이 단지alias성별은 사용하기 쉽도록 더 짧은 이름을 가진 변수로, 당신은 또한 매번 업데이트 될 속성을 사용할 수 있습니다.data변경되어 있습니다.

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

저 같은 경우에는...:v-model템플릿에 추가되어 있습니다.그렇지만v-model대장을 가져가지 않습니다.그게 모든 걸 망가뜨렸어.

언급URL : https://stackoverflow.com/questions/51992261/why-vue-component-wont-update-on-select-change