Vue.js는 v-for와 함께 구성 요소를 다시 렌더링하지 않음

Vue.js는 v-for와 함께 구성 요소를 다시 렌더링하지 않음

나는 다중 텍스트 입력 구성요소를 만들려고 한다.개별 필드를 관리하는 상위 Vue 구성 요소와 단일 입력에 대한 구성 요소가 있다.

상위 구성 요소는 개체 배열에 바인딩된 v-for를 통해 하위 구성 요소를 렌더링한다.

data() {
    return {
        lastItemId: 0,
        items: [{ id: this.lastItemId, value: '', showDeleteBtn: false}]
    }
},

템플릿:

<div>
    <input-item v-for='(item, index) in items'
                :key="item.id"
                :default-data="item"
                @itemAdded="addItemAfter(index)"></input-item>
</div>

사용자가 목록의 마지막 필드에 입력을 시작할 때마다 나는 이벤트 뒤에 새 텍스트 필드를 추가하기 위해 이벤트를 내보내고 있다.

addItemAfter(index) {
    if (index == this.items.length - 1) {
        this.items.push({
            id: ++this.lastItemId,
            value: '',
            showDeleteBtn: false
        });
    }
}

이것은 아주 잘 된다.그러나 필드는 또한 현재 인덱스의 항목을 업데이트하여 해당 필드 근처에 삭제 버튼을 표시해야 한다.내가 무엇을 하든, Vue는 내가 다른 ID의 객체를 그 인덱스에 설정하지 않는 한, 그 구성요소를 다시 렌더링하지 않는다 - 내가 원하는 것은 아니다.

내가 해 본 것:

this.items[index].showDeleteBtn = true;

---

let item = this.items[index];
item.showDeleteBtn = true;
this.$set(this.items, index, item);

---

let item = this.items[index];
item.showDeleteBtn = true;
this.items.splice(index, 1, item);

---

this.$set(this.items[index], 'showDeleteBtn', true);

---

갱신하다

이것은 어린이 구성요소의 이 문제 부분에서 가장 중요하다.

<button class="btn text-danger" v-show="showDeleteBtn" @click.prevent="removeItem">
    <i class="glyphicon glyphicon-remove"></i>
</button>

// ....................................

props: ['defaultData'],

data() {
    return {
        itemId: this.defaultData.id,
        item: this.defaultData.value,
        showDeleteBtn: this.defaultData.showDeleteBtn
    }
},

항목을 업데이트할 때 삭제 버튼이 나타나지 않는 이유는 해당 값이showDeleteBtn자식 구성 요소의 속성이 업데이트되지 않는 경우.

Vue 인스턴스(instance) 속성이 에서 설정되었기 때문에 해당 값이 업데이트되지 않음data방법은 초기화 시 한 번만 설정된다.그렇게showDeleteBtn단 한 번밖에 정해지지 않았다.data방법:

showDeleteBtn: this.defaultData.showDeleteBtn

업데이트 시showDeleteBtn의 재산.item구속되어defaultData프로펠러(prop)의 가치를 변화시키는 것defaultData하위 구성 요소의 개체.그러나, 그것이 자동으로showDeleteBtn하위 구성 요소의 속성.

---

가장 간단한 해결책은showDeleteBtn에 의해 설정된 속성 대신 계산된 속성data방법:

computed: {
  showDeleteBtn() {
    return this.defaultData.showDeleteBtn;
  }
}

이는 Vue 인스턴스에 명시적으로showDeleteBtn의 가치로 평가하다this.defaultData.showDeleteBtn변한다면 말이야

---

또 다른 해결책은showDeleteBtn소품:

props: { defaultData: Object, showDeleteBtn: Boolean },

그리고 값을 바인딩한다.item.showDeleteBtn상위 구성 요소로부터 공급받으려면:

<input-item 
  v-for='(item, index) in items'
  :key="item.id"
  :default-data="item"
  :show-delete-btn="item.showDeleteBtn"
  @itemAdded="addItemAfter(index)"
/>

이렇게 하면, 가치에 대한 어떤 변화도item.showDeleteBtn...의 가치에 직접적으로 반영될 것이다.showDeleteBtn어린이 구성 요소의 받침

이 방법은 또한 부모 범위로부터 어떻게 그 속성을 변화시키는가를 좀 더 명확하게 한다.item아동 구성요소에 영향을 미칠 겁니다

참조URL: https://stackoverflow.com/questions/47096942/vue-js-doesnt-re-render-components-with-v-for