I've asked in IRC and slack but I can't get anyone to figure out why this isn't working.
//test-vue.blade.php
@extends('spark::layouts.app')
@section('content')
<div id="testing">
<input type="text" v-model="vin">
<button type="button" v-on:click="test">Click me</button>
</div>
@endsection
/* resources/assets/js/boostrap.js
|--------------------------------------------------------------------------
| Laravel Spark Components
|--------------------------------------------------------------------------
|
| Here we will load the Spark components which makes up the core client
| application. This is also a convenient spot for you to load all of
| your components that you write while building your applications.
*/
require('./../spark-components/bootstrap');
require('./home');
var f = new Vue({
el:'#testing',
data: {
items: '',
vin: 'vdfdfa'
},
created: function () {
console.log(this.vin);
this.test();
},
mounted: function (){
},
methods: {
test : function(){
alert('test function called');
},
getDetailByVin: function(){
console.log('testing');
var urlData = 'http://asisauto.app:8000/test_data.json';
// GET /someUrl
var self = this;
this.$http.get(urlData).then((response) => {
// success callback
console.log(response.body);
}, (response) => {
// error callback
console.log('error');
});
}
}
});
I've tried lots of things and can't figure out what happens. Mounted gets called so does f.text(); if I place it after the declaration. But the button press never works. there aren't any errors in the console either.