javascript - How to refresh Vue components upon list item removal? - Stack Overflow

admin管理员组

文章数量:1345448

I know how to remove a list item from a Vue instance. However, when list items are passed to Vue ponents, how to remove a list item while keeping the ponents in sync with the list data?

Here is the use case. Consider an online forum with a Markdown editor. We have a Vue instance whose data are a list of saved ments fetched from a server. These ments are supposed to be written in Markdowns.

To facilitate edits and previews, we also have a list of ponents. Each ponent contains an editable input buffer as well as a preview section. The content of the saved ment in the Vue instance is used to initialise the input buffer and to reset it when a user cancels an edit. The preview is a transformation of the content of the input buffer.

Below is a test implementation:

<template id="ment">
    <div>
        Component:
        <textarea v-model="input_buffer" v-if="editing"></textarea>
        {{ preview }}
        <button type="button" v-on:click="edit" v-if="!editing">edit</button>
        <button type="button" v-on:click="remove" v-if="!editing">remove</button>
        <button type="button" v-on:click="cancel" v-if="editing">cancel</button>
    </div>
</template>

<div id="app">
    <ol>
        <li v-for="(ment, index) in ments">
            <div>Instance: {{ment}}</div>
            <ment
                v-bind:ment="ment"
                v-bind:index="index"
                v-on:remove="remove">
            </ment>
        </li>
    </ol>
</div>

<script src=".1.8/vue.js"></script>

<script>
let ments = ['111', '222', '333']

Vueponent('ment', {
  template: '#ment',
  props: ['ment', 'index'],
  data: function() {
    return {
      input_buffer: '',
      editing: false,
    }
  },
  mounted: function() { this.cancel() },
  puted: {
    preview: function() {
      // This is supposed to be a transformation of the input buffer,
      // but for now, let's simply output the input buffer
      return this.input_buffer
    },
  },
  methods: {
    edit:   function() { this.editing = true },
    remove: function() { this.$emit('remove', this.index) },
    cancel: function() { this.input_buffer = thisment; this.editing = false },
    //save: function() {},  // submit to server; not implemented yet
  },
})

let app = new Vue({
  el: '#app',
  data: { ments: ments },
  methods: {
    remove: function(index) { thisments.splice(index, 1); app.$forceUpdate() },
  },
})
</script>

The problem is that, if we remove a ment, the ponents are not refreshed accordingly. For example, we have 3 ments in the above implementation. if you remove ment 2, the preview of item 3 will still show the content of item 2. It is updated only if we press edit followed by cancel.

I've tried app.$forceUpdate(), but that didn't help.

I know how to remove a list item from a Vue instance. However, when list items are passed to Vue ponents, how to remove a list item while keeping the ponents in sync with the list data?

Here is the use case. Consider an online forum with a Markdown editor. We have a Vue instance whose data are a list of saved ments fetched from a server. These ments are supposed to be written in Markdowns.

To facilitate edits and previews, we also have a list of ponents. Each ponent contains an editable input buffer as well as a preview section. The content of the saved ment in the Vue instance is used to initialise the input buffer and to reset it when a user cancels an edit. The preview is a transformation of the content of the input buffer.

Below is a test implementation:

<template id="ment">
    <div>
        Component:
        <textarea v-model="input_buffer" v-if="editing"></textarea>
        {{ preview }}
        <button type="button" v-on:click="edit" v-if="!editing">edit</button>
        <button type="button" v-on:click="remove" v-if="!editing">remove</button>
        <button type="button" v-on:click="cancel" v-if="editing">cancel</button>
    </div>
</template>

<div id="app">
    <ol>
        <li v-for="(ment, index) in ments">
            <div>Instance: {{ment}}</div>
            <ment
                v-bind:ment="ment"
                v-bind:index="index"
                v-on:remove="remove">
            </ment>
        </li>
    </ol>
</div>

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.1.8/vue.js"></script>

<script>
let ments = ['111', '222', '333']

Vue.ponent('ment', {
  template: '#ment',
  props: ['ment', 'index'],
  data: function() {
    return {
      input_buffer: '',
      editing: false,
    }
  },
  mounted: function() { this.cancel() },
  puted: {
    preview: function() {
      // This is supposed to be a transformation of the input buffer,
      // but for now, let's simply output the input buffer
      return this.input_buffer
    },
  },
  methods: {
    edit:   function() { this.editing = true },
    remove: function() { this.$emit('remove', this.index) },
    cancel: function() { this.input_buffer = this.ment; this.editing = false },
    //save: function() {},  // submit to server; not implemented yet
  },
})

let app = new Vue({
  el: '#app',
  data: { ments: ments },
  methods: {
    remove: function(index) { this.ments.splice(index, 1); app.$forceUpdate() },
  },
})
</script>

The problem is that, if we remove a ment, the ponents are not refreshed accordingly. For example, we have 3 ments in the above implementation. if you remove ment 2, the preview of item 3 will still show the content of item 2. It is updated only if we press edit followed by cancel.

I've tried app.$forceUpdate(), but that didn't help.

• javascript
• vue.js
• vue-ponent

Share Improve this question Follow asked Feb 15, 2017 at 16:45 user740006user740006 1,84755 gold badges2121 silver badges3030 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

You just need to add key attribute in the v-for loop like following:

<li v-for="(ment, index) in ments" :key="ment">

See working fiddle: https://fiddle.jshell/mimani/zLrLvqke/

Vue tries to optimises rendering, by providing key attribute, it treats those as pletely different elements and re-renders those properly.

See the key documentation for more information.

try with:

Vue.ponent('ment', {
  template:
`<div>
  {{ ment }}
  <button v-on:click="remove"> X </button>
</div>`,
  props: ['ment', 'index'],
  methods: {
    remove: function() {
      this.$emit('remove', this.index);
   }
  },
});

vm = new Vue({
  el: '#app',
  data: {
   ments: ['a','b','c','d','e']
  },
  methods: {
    remove: function(index) { 
		this.ments.splice(index, 1);
	},
  },
});

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.1.8/vue.min.js"></script>


<div id="app">
    <ol>
        <li v-for="(ment, index) in ments">
            <ment
                v-bind:ment="ment"
                v-bind:index="index"
                v-on:remove="remove">
            </ment>
        </li>
    </ol>
</div>

本文标签： javascriptHow to refresh Vue components upon list item removalStack Overflow