When remove dynamically a component one part is not deleted

Questions
1

Hello,
i have a list of document on my page and add a new document dynamically.

But if i delete one doc not all is deleted. i try to see you a piace of code:

<f7-tab id="tab-4" class="page-content">
  <f7-block>
    <div v-for="(input, index) in inputs_docs">
      <f7-row no-gap>
        

      <f7-col width="45">
        <f7-list no-hairlines-md class="margin-list">
          <f7-list-input
          label="Number"
          type="text"
          v-model="input.document_number"
          @input="input.document_number = $event.target.value"
          validate
          ></f7-list-input>
        </f7-list>
      </f7-col>
// ...
      <f7-col width="10" style="text-align:center;">
        <f7-list no-hairlines-md class="margin-list">
          <div :class="'link_doc'+index" @click="actionDoc(index)"></div>
          <f7-link href="#" @click="takeDoc('doc', index)">
            <img :class="'img_doc'+index" src="../asset/img/doc.png" style="max-width:75px; max-height:50px; margin:5px" />
          </f7-link>
        </f7-list>
      </f7-col>
      <f7-col width="40">
        <f7-list no-hairlines-md class="margin-list">
          <f7-list-input
          label="DOC_URL"
          type="text"
          v-model="input.document_url"
          @input="input.document_url = $event.target.value"
          validate
          >
        </f7-list-input>
        </f7-list>
      </f7-col>
    </f7-row>
// ...
    <f7-row no-gap>
      <f7-col width="90">
        <f7-list no-hairlines-md class="margin-list">
          <f7-list-input
          label="Note"
          type="text"
          v-model="input.document_note"
          @input="input.document_note = $event.target.value"
          validate
          ></f7-list-input>
        </f7-list>
      </f7-col>

      <f7-col width="10">
        <button class="button button-outline button-large button-small color-red" type="button" @click="deleteRowDoc(index)">Delete</button>
      </f7-col>
    </f7-row>
    <hr>
  </div>

  <f7-row>
    <button class="button button-fill button-raised button-small color-blue btn_add_doc" type="button" @click="addDoc()"><i class="fa fa-plus"></i> Add Doc</button>
  </f7-row>

</f7-block>
</f7-tab>

... ... ... 

    deleteRowDoc(docRow) {
      const self = this
      var $$ = this.Dom7
      
       self.inputs_docs.splice(docRow,1);
        $$(".link_doc"+docRow).html('')
        $$(".img_doc"+docRow).removeClass('d-none')
      },

When i add a new doc use this function:

addDoc: function () {
      this.inputs_docs.push({
        attachment_type_id: '',
        document_number: '',
        release_date: '',
        release_place: '',
        expiration_date: '',
        document_note: '',
        document_url: '',
        file_name: ''
      });
    },

and add this line manually :

  $$(".link_doc"+docRow).html('<span class="open_url_doc'+docRow+'" data-id="'+imgURI+'">'+icon+'</span>')
          $$(".img_doc"+docRow).addClass('d-none')

The component for doc it’s deleted but the link_doc and img_doc no!!! I have every the first icon and link.

Why???

2

its bcs of how vue reactivity works, nothing wrong with f7, nor vuejs.

read this to learn aobut reactivity:

and this also should help:

solution from vuejs Common Gotchas:

When you modify an Array by directly setting an index (e.g. arr[0] = val ) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for arr.splice(index, 1, value) .

1 Like