Inserting Vue Component in the DOM via jQuery

Question

Inserting Vue Component in the DOM via jQuery

Navigation

#1 by (0 votes)

3

I'm using Vue in an application where I have a list of items and a button to add more items. When you click 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 however does not render the component.

When you click 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 you like to type a refresh on the component only?

javascript jquery vue.js

asked by anonymous 10.11.2017 / 18:49

1 answer

Can not find -lleg (DEV C ++ and Allegro) how to do a mysql query containing several id separated by commas

score 0 · Accepted Answer

Solved !! I created an array that would look like the v-model of this list I'm adding to the screen.

Then I fenced 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 looks like this:

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