[Vuejs]-Use Vue only in part of an existing jQuery project

by

0👍

It’s missing the creation of the Vue component, and the div with the initialisation element id and the vue components tags.
The initialisation part of Vue looks good to me, just make sure to happen after the components are defined.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>

<body class="fixed-layout skin-blue-dark p-0" id="page-top" oncopy="return false" oncut="return false" oncontextmenu="return false">
  <p>A LOT OF CONTENT HERE</p>
  <div id="my-form">
    <my-form></my-form>
</div>

<script>
    
    Vue.component('my-form', {
        template:`
        <form action="" method="POST" class="form" id="my-form" data-action="create">
                <p>A LOT OF CONTENT HERE</p>
                <label for="name">Tipo de producto</label>
                <select class="form-control" name="product_type" id="product-type" v-model="selectedProductType" required>
                  <option value="" disabled selected>Selecciona...</option>
                  <option value="Producto con descuento">Producto con descuento</option>
                   <option value="Producto 3x2 o 2x1">Producto 3x2 o 2x1</option>
                   <option value="Producto en combo">Producto en combo</option>
                   <option value="Producto no promocional">Producto no promocional</option>
                 </select>
               <br>
                {{ selectedProductType }}
        </form>`,
        data() {
          return {
             selectedProductType: "Producto 3x2 o 2x1",
          }
        }
    })
    const vueApp = new Vue({
        el: '#my-form',
        created(){
            console.log("+++++++++++++++++++++++++++++++++++++++++ CREATED");
        }
    })

</script>
</body>

</html>

this should work!

0👍

data(){return{}} is needed when you are creating Vue.component, in case of new Vue you need data:{}

Try data:{} instead of data(){return{}} like this:

const vueApp = new Vue({
  el: '#my-form',
  data: {
      selectedProductType: "Producto 3x2 o 2x1"
  }
})

0👍

It looks like I just needed to set Vue in head section instead of the end of body tag, I added Vue from CDN:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

And then, I initilized it after all components were loaded in the bottom of body tag.

Leave a comment