CODEWITHSUNDEEP
javascriptlaravellaravel-5vue.jslaravel-5.5
MaZZie
MaZZie

Reputation: 15

Vue.js script does nothing in Laravel 5.5

I'm tring to add new text field to an existing form when somebody clicks on the + sign. This is working good in the code snippet that I created. But it's not working in my Laravel 5.5 site.

I don't have any errors in my console.

The HTML goes into create.blade.php and the vue script is into addFlavor.vue I'n my app.js i put:

Vue.component('addflavor-component', require('./components/addFlavor.vue'));


// addFlavor.vue
new Vue({
    el: '#vue',
        data() {
            return {
    	        formdata: [],
                flavors: [{
                    name: '',
                    percentage: '',
                }]
            }
        },
        methods: {
            addAroma: function(){
                this.flavors.push({
                    name: '',
                    percentage: ''
                })
            }
        },
        
    })
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/vue/1.0.12/vue.min.js"></script>
<!-- create.blade.php -->
<div id="vue">
  
    <div class="form-row align-items-left" v-for="flavor in flavors">

        <div class="col form-inline">
            <label class="sr-only" for="flavorname">Aroma 1</label>
            <div class="form-group">
                <input  type="text" 
                        class="form-control mb-2 mb-sm-0" 
                        id="flavorname" 
                        v-model="flavor.name">
            </div>
            <div class="input-group md-2 mb-sm-0">
                <input  type="text" 
                        class="form-control" 
                        id="percentage" 
                        v-model="flavor.percentage">
                                
                <div class="input-group-addon">%</div>
            </div>
            <button class="btn btn-success mt-5 mb5" @click="addAroma">+</button>
        </div> 
</div>
  
  <hr>
  
  <pre>
    {{ $data | json }}
  </pre>
  
</div>

How can I use this script correctly in my Laravel 5.5 site?

Upvotes: 1

Views: 711

Answers (1)

common sense
common sense

Reputation: 3912

Rename your file addFlavor.vue to AddFlavor.vue (to follow VueJS recommendations).

Change your code in that file to:

export default {
    name: 'add-flavor',

    data() {
        return {
            formdata: [],
            flavors: [{
                name: '',
                percentage: '',
            }]
        }
    },

    methods: {
        addAroma() {
            this.flavors.push({
                name: '',
                percentage: ''
            })
        }
    },
}

Change the code in app.js to

import AddFlavor from './components/AddFlavor.vue';

const app = new Vue({
    el: '#vue',
    components: {
        'addflavor': AddFlavor,
   }
});

Add the following line to webpack.min.js: mix.js('resources/assets/js/app.js', 'public/js'); and include the app.js in your blade layout file via <script src="{{ mix('/js/app.js') }}"></script>.

Remove the manual VueJS import from your HTML file. Its not necessary since its already defined in package.json and will be installed via NPM. Furthermore, you import version 1.x of VueJS but the latest version is 2.5.x. I strongly recommend this one.

<!-- create.blade.php -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div id="vue"><!-- <-- This could go to your main layout file -->
    <add-flavor inline-template>
        <div class="form-row align-items-left" v-for="flavor in flavors">
            <div class="col form-inline">
                <label class="sr-only" for="flavorname">Aroma 1</label>
                <div class="form-group">
                    <input type="text" class="form-control mb-2 mb-sm-0" id="flavorname" v-model="flavor.name">
                </div>
                <div class="input-group md-2 mb-sm-0">
                    <input type="text" class="form-control" id="percentage" v-model="flavor.percentage">

                    <div class="input-group-addon">%</div>
                </div>
                <button class="btn btn-success mt-5 mb5" @click="addAroma">+</button>
            </div> 
        </div>
    </add-flavor>
    <hr>

    <pre>{{ $data | json }}</pre>

</div>

So said, if not already done, install all node dependencies via npm install or yarn install and afterwards run node run watch. This should build all needed modules.

Upvotes: 1

Related Questions