javascript – Inserting Vue Component into DOM via jQuery

Question:

I'm using Vue in an application where I have a list of items and a button to add more items. When I click on add I load an external html with a component:

    <div class="gutters-8 col-lg-6">
     <div class="form-group combined-inputs">
      <span class="upload-image">
        <label>
        <i class="material-icons">&#xE439;</i>
        <input type="file">
        </label>
      </span>

      <input-animate label="Descrição do produto" type="text"></input-animate>     
    </div>
  </div>

The page opens but does not render the component.

When you click on the button to add the component, the addProduct method is called:

methods: {
    addProduct: function() {
      $.get('/do/Suppliers.mvc/ProdutoCatalogo')
      .then(function(page){          
          $('.products-list').prepend(page)
      }, function(){
        console.log('Erro ao carregar a página')
      })
    }
}

Would it be possible to refresh the component?

Answer:

Sorted out!! I created an array that would be like the v-model of this list that I'm going to add to the screen.

So I surrounded my html code with v-for by iterating this list: v-for="item in itemList"

<div class="gutters-8 col-lg-6" v-for="item in itemList">
     <div class="form-group combined-inputs">
      <span class="upload-image">
        <label>
        <i class="material-icons">&#xE439;</i>
        <input type="file">
        </label>
      </span>

      <input-animate label="Descrição do produto" type="text"></input-animate>     
    </div>
  </div>

Include this itemList in my data().

And the addProduct looked like this:

methods: {
    addProduct: function() {
      this.itemList.push({itemID:''})
    }
}
Scroll to Top