I'm trying to make a multiple text input ponent. There's a parent Vue ponent to manage individual fields and a ponent for a single input.

The parent ponent renders the child ponents via a v-for which is bound to an array of objects.

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

Template:

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

Whenever the user starts typing in the last field in the list I'm emitting an event to add a new text field after it.

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

This works just fine. However, I also need to update the item at the current index to display the delete button near that field. Whatever I do, Vue doesn't re-render that ponent, unless I set an object with a different ID to that index - which is not what I want.

Things I have tried:

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);

Update

This is the most important in this problem part of the child ponent:

<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
    }
},

I'm trying to make a multiple text input ponent. There's a parent Vue ponent to manage individual fields and a ponent for a single input.

The parent ponent renders the child ponents via a v-for which is bound to an array of objects.

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

Template:

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

Whenever the user starts typing in the last field in the list I'm emitting an event to add a new text field after it.

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

This works just fine. However, I also need to update the item at the current index to display the delete button near that field. Whatever I do, Vue doesn't re-render that ponent, unless I set an object with a different ID to that index - which is not what I want.

Things I have tried:

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);

Update

This is the most important in this problem part of the child ponent:

<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
    }
},

• javascript
• vue.js
• vuejs2

• 2 Well, the v-for doesn't have to re-render - the array didn't change. The input-item ponent(s) must re-render, and appearantly don't. So can you share their code/markup? – Linus Borg Commented Nov 3, 2017 at 13:33
• I updated the question. – Alexander Commented Nov 3, 2017 at 13:38
• 1 The properties set in the data method are set once on initialization. They won't update in response to changes to the defaultData prop. – thanksd Commented Nov 3, 2017 at 13:39
• 2 How about using puted() instead? – raina77ow Commented Nov 3, 2017 at 13:42
• 1 To clarify: the value of the defaultData prop will update in response to changes to the item value bound to the prop. But the data method won't get called again to update the showDeleteBtn data property. You could use a puted, or just specify a showDeleteBtn prop and pass that via :show-delete-btn="item.showDeleteBtn" – thanksd Commented Nov 3, 2017 at 13:44

1 Answer 1

The reason the delete button is not showing up when you update the item is that the value of the showDeleteBtn property of your child ponent is not updating.

That value is not updating because the Vue instance properties set in the data method are only set once on initialization. So, showDeleteBtn is only ever set once in the data method:

showDeleteBtn: this.defaultData.showDeleteBtn

When you update the showDeleteBtn property of the item being bound as the defaultData prop, that changes the value of the defaultData object in the child ponent. However, that does not automatically update the showDeleteBtn property in the child ponent.

The simplest solution would be to make showDeleteBtn a puted property instead of a property set by the data method:

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

This explicitly tells the Vue instance to update the showDeleteBtn value with the value of this.defaultData.showDeleteBtn if it ever changes.

Another solution would be to make showDeleteBtn a prop:

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

And bind the value of item.showDeleteBtn to that prop from the parent ponent:

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

This way, any changes to the value of item.showDeleteBtn will be directly reflected in the value of the showDeleteBtn prop of the child ponent.

This way also makes it a little clearer from the parent scope how changing that property on the item is going to affect the child ponent.