Hei, make a vue app.
When running it shows up part of the app, the add event don´t show up and not even show the data.
Before it show the same error but different area, and i could fixed it but now i can´t figure it out. I´ve been searching here and on the net, but nothing so far. I know it was so be something with the template in html, but can´t figure it out. First time working with Vue.
Thank you. Here the error
<div class="container" id="events">
<!-- add an event form -->
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Add an Event</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" placeholder="Event Name" v-model="event.name">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
</div>
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" v-model="event.date">
</div>
<button class="btn btn-primary" v-on="click: addEvent">Submit</button>
</div>
</div>
</div>
</div>
- invalid expression: Unexpected token : in
click: addEvent
Raw expression: v-on="click: addEvent"
(found in <Root>)
The error is due to an incorrect v-on expression.
The v-on expression should look similar to the following:
v-on:click="addEvent"
Where addEvent is the name of the function to be called when the component is clicked. For related examples see Vue.js Event Handling.
Related
I am making a web tool in angular 5 to help in the creation of new XML.
I am having trouble passing around the values of inputs and keeping them in the same input at the same time.
I Have a form with an event of ngSubmit that uses as a paremeter the reference of an ngForm
<form class="form-group" (ngSubmit)="createSimpleTypeList(f)" #f="ngForm" >
<div class="container">
<div class="row">
<div class="col-sm-12" >
<button class="btn btn-danger flex ">Construir Json!</button>
</div>
</div>
</div>
<hr>
<div class="container" *ngFor="let type of objSimpleType;let i =index">
<hr>
<div class="row">
<div class="col-sm-3">
<input type="text" [(ngModel)]="type.name" name="nameType"/>
<br>
Inserte el nombre del tipo:
</div>
<div class="col-sm-3">
<input type="text" [(ngModel)]="type.type" name="type"/>
<br>
Inserte el tipo:
</div>
<div class="col-sm-2">
<input type="number" [(ngModel)]="type.min" name="min"/>
<br>
Inserte minimo:
</div>
<div class="col-sm-2">
<input type="number" [(ngModel)]="type.max" name="max"/>
<br>
Inserte maximo:
</div>
<div class="col-sm-2">
<input type="checkbox" name="number" /> Numero?
</div>
</div>
</div>
<hr>
</form>
This is the createSimpleTypeList method
console.log(form.value.nameType);
this.objSimpleType.push({
'-name': form.value.nameType,
'xsd:restriction': {
'-base': form.value.type,
'xsd:minLength': {
'-value': form.value.min
},
'xsd:maxLenght': {
'-value': form.value.max
}
}
});
this.typeList.emit(form.value.nameType);
this.sharedNameSpace.emit(this.namespace);
The problem I am having is that I have not found a way to push new items into objSimpleType, without erasing the value of inputs, and if I manage to not erase the value of the inputs then the values of the form wont push.
this is how it looks.how the inputs work right now
This is what I need
How the inputs should be
I am still new to angular, and I would really appreciate the help.
Now that I have looked found the solution, I had two mistakes in the code above.
First my logic was not well executed, I needed to work with unique IDs,and call them dynamically.
Second, I was having trouble to call them , and after reading a lot, I found that I can call the parameters of a Json with brackets[].
"form.value['nameType' + this.i]" --Something like this is what i Needed.
I have a pair of standard Bootstrap radio buttons and I wanted v-model to set a value in the vue data object when one is selected.
This works just fine in a JSfiddle, however this doesn't work when running locally on my own environment.
I can get other directives working fine like 'v-if', but v-model just doesn't seem to work at all.
Nothing comes up in the console, and when using vue dev tools extension; I can see that the 'test' object is never updated when one of the radio buttons is selected.
I'm using the latest version of bootstrap, jquery and the vue development version.
<div class="container margin-top-rem" id="app">
<div class="row">
<div class="col-12">
<div class="card text-center" v-if="testIf">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active card-body-padding">
<div class="row">
<div class="col-12">
<div class="form-group">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary">
<input type="radio" name="options" autocomplete="off" v-model="testVModel" :value="false" />false
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" autocomplete="off" v-model="testVModel" :value="true" />true
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>test value is {{testVModel}}</div>
</div>
</div>
</div>
var app = new Vue({
el: '#app',
data: {
testIf: 'blah',
testVModel: ''
}
})
It looks like this is a conflict between bootstrap and Vue.
Two options to resolve are:
1) Use Bootstrap-vue
2) Remove 'data-toggle="buttons"' from:
<div class="btn-group-toggle" data-toggle="buttons">
<div class="col-sm-2">
<div class="form-group">
<div class="toggle-switch toggle-switch--blue">
<input type="checkbox" class="toggle-switch__checkbox" (change)="checkisPetBondAvailable($event)" >
<i class="toggle-switch__helper"></i>
</div>
</div>
</div>
Here is the code for toggle switch where its getting disabled after refreshing the page can i get any solution for it
i got the answer in above code we should use [checked] for two way binding
I'm working on my first app built on the Spark foundation now, and I've hit a wall. I should mention that I've looked through the entire Vue Laracast twice now - but Vue is used differently in Spark, which has me confused. Hopefully someone can clarify this a bit for me.
So, the first custom view I've added so far is:
#extends('spark::layouts.app')
#section('content')
<master-servers>
<div class="container">
<!-- Add Server -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Add Server</div>
<div class="panel-body">
<form class="form-horizontal" role="form" method="POST" v-on:submit.prevent='methodAddServer'>
{{ csrf_field() }}
#if(count($errors) > 0)
<div class="alert alert-danger">
#foreach($errors->all() as $error)
<p>{{ $error }}</p>
#endforeach
</div>
#endif
#if(session('fail'))
<div class="alert alert-danger">
<p>{{ session('fail') }}</p>
</div>
#endif
#if(session('success'))
<div class="alert alert-success">
<p>{{ session('success') }}</p>
</div>
#endif
<!-- Server Label -->
<div class="form-group">
<label class="col-md-4 control-label">Server Label</label>
<div class="col-md-6">
<input type="text" class="form-control" name="name" v-model='addServer.name' value="{{ old('name') }}" autofocus>
</div>
</div>
<!-- IP -->
<div class="form-group">
<label class="col-md-4 control-label">IP Address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="ip" v-model='addServer.ip' value="{{ old('ip') }}">
</div>
</div>
<!-- Add Button -->
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-primary" :disabled="addServerFormBusy">
<i class="fa m-r-xs fa-sign-in"></i>Add server
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</master-servers>
#endsection
In the resources\assets\js\components, I then have a file named servers.js, which contains:
var base = require('../master/servers/servers');
Vue.component('master-servers', {
mixins: [base]
})
And finally, resources\assets\js\master\servers\servers.js contains:
module.exports = {
data: function() {
return {
addServer: [
{ name: '' },
{ ip: '' }
]
}
},
methods: {
methodAddServer: function(e) {
console.log(addServer);
this.addServerFormBusy = true;
this.$http.post('server', this.addServer);
}
}
};
The issue at hand: When browsing this page, and watching the console, I get the following:
Error when evaluating expression "addServer.name": TypError: Cannot
read property "name" of undefined
You are setting a non-existant path "addServer.name" on a vm instance.
Consider pre-initializing the poprety with the "data" option for more
reliable reactivity and better performance.
v-on:submit="methodAddServer" expects a function value, got undefined
What I've tried:
I've tried adding all of the code into the component without using a mixin as well (as a test) - but that resulted in the same issues.
I spent some time looking through how the views (as Vue's) are built in Spark now, but wind up getting lost in the structure quite a bit.
From everything I've understand when watching the Vue laracast, this should work - but as Spark is using some kind of other convention, I'm not sure it's supposed to here. I realize I could use it as shown in the Laracast, but I'd like to keep building using the same coding style that is used in Spark.
If any of you experts out there have any clue as to what might be going on or missing, or for that matter have any other tangible advise, I'd be very thankful!
The solution to this turned out to be exporting the Spark JS files and reviewing how it's defined there. Forms are defined within components and included in a bootstrap file, which I had completely missed.
I'd like to accomplish a horizontal form with rows of multiple left aligned form controls per row. The final layout should look like this
First of all I want the icon show up NEXT to the name of the user on the right side of the user's name just like in the image showed above.
I use GWT along with bootstrap3.3.2. I read a lot about mix of horizontal forms
with inline forms or using horizontal forms along with rows of form controls. The last approach I like most.
I prepared a bootply which shows my first problem (I'll create a second bootply and stackoverflow post for additional problems). http://www.bootply.com/hheckner/GiPzaqWHlT
As you can see there, the icon does not align well (vertically) to the name of the user. Furthermore I'd like to show up the icon NEXT to the user's name, so if the user name is longer the image should move to the right and vice versa. Using the grid does not help here (I think at least). The icon should show up immediately next to the user name?
How can I accomplish this?
To get icon showing next to some text you just need to have span right after text, but still inside your <p> element.
I made somewhat similar form to the one you provided in screenshot using only Bootstrap Grid. There are probably multiple solutions, that could be better in terms of lines of code, but when you get used to grid system this should be quite fast method.
I have to warn you I used <h4></h4> for all text, and no special element for some text, so you should fix it accordingly. Also Bootstrap's form-inline class works only when viewport is bigger then 768px - you might not see working example on JSFiddle as you would want, but when you see it on screen bigger then 768px, it should be just fine.
<div style="text-align:left;">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<h4>Owner</h4>
</div>
<div class="col-md-8">
<h4>Hannes Heckner <span class="glyphicon glyphicon-pencil"></span></h4>
</div>
</div>
<form class="form-inline">
<div class="row">
<div class="col-md-4">
<h4>Scheduled for</h4>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-1">
<h4>Begin:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="beginDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="10:30">
</div>
(Duration: <div class="form-group">
<input type="text" class="form-control" id="beginTime" placeholder="30">
</div> min)
</div>
</div>
<div class="row">
<div class="col-md-1">
<h4>End:</h4>
</div>
<div class="col-md-11">
<div class="form-group">
<input type="text" class="form-control" id="endDate" placeholder="11/10/2015">
</div>
<div class="form-group">
<input type="text" class="form-control" id="endTime" placeholder="11:30">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<h4>Location</h4>
</div>
<div class="col-md-8">
<div class="form-group">
<input type="text" class="form-control" id="location">
</div>
</div>
</div>
</form>
</div>
</div>
JSFiddle https://jsfiddle.net/dejanmarolt/5ctd4fe5/