When the + sign is clicked, I want to add a new text field to an existing form. This functionality works fine in my code snippet, but not on my Laravel 5.5 site.
No errors are showing up in my console.
The HTML code goes into create.blade.php and the Vue script is placed in addFlavor.vue. In my app.js file, I have added:
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 successfully implement this script in my Laravel 5.5 site?