Inserting Vue Component into the DOM via jQuery

Asked

Viewed 313 times

3

I’m using Vue in an application where I have a list of items and a button to add more items. By clicking 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>

Page opens but does not render component.

Clicking the button to add the component is called the addProduct method:

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

It would be like a refresh only on the component?

javascript jquery vue.js

  • Since you don’t need "refresh", it should work. How are the html tags you’re going to insert? If you’re trying to put <html> inside <html> won’t work

  • Could be that, I’ll confirm

  • There is no <html> tag on the external page I’m calling

  • There is the element with the class .products-list?

  • There is. This external page it has other html elements besides the component. These others usually display, only the component tag.

1 answer

0


Solved!! I created an array that would be like the v-model of this list that I keep adding on the screen.

So I surrounded my html code with v-for 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 date().

And addProduct went like this:

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

Browser other questions tagged javascript jquery vue.js

You are not signed in. Login or sign up in order to post.