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">
Related
I'm still quite new to web development, so there might be some very basic misunderstandings on my part.
What I'm trying to do:
We use Keycloak to manage access to a web app. The app is Vue project using Vuetify. To achieve a unified look, I want to use Vuetify to design the Keycloak theme for the login as well.
Here is the screendesign:
What I've done so far:
I created the folder keycloak/themes/my-theme, and added these files:
I took the two ftl files from the base theme, then I tried to rewrite the login with Vuetify classes.
To do so I inspected the code of the elements I want in the Vuetify docs and worked them into login.ftl. While this did work more or less for the Log In button, it seems to be completely wrong for the inputs.
Here is what it looks like:
The misalignment is probably fixable with a lot of fine tuning, but one thing I don't know what to do about is that the text inputs don't get activated when I click into them.
I'm pretty sure that copying code from the developer tools is the wrong way to do this. Is there any way to actually design a Keycloak theme with Vuetify? Without basically copying the Vuetify code?
Here is the current login.ftl:
<#import "template.ftl" as layout>
<#layout.registrationLayout displayInfo=social.displayInfo displayWide=(realm.password && social.providers??); section>
<#if section = "header">
${msg("loginWelcomeMessage")}
<#elseif section = "form">
<div id="kc-form" <#if realm.password && social.providers??>class="${properties.kcContentWrapperClass!}"</#if>>
<div id="kc-form-wrapper" <#if realm.password && social.providers??>class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}"</#if>>
<#if realm.password>
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<div class="${properties.kcFormGroupClass!}">
<div class="v-input rom__text--darkblue theme--light v-text-field v-text-field--is-booted v-text-field--enclosed v-text-field--outlined v-text-field--placeholder">
<div class="v-input__control">
<div class="v-input__slot">
<div class="v-input__prepend-inner">
<div class="v-input__icon v-input__icon--prepend-inner"><i aria-hidden="true" class="v-icon notranslate fas fa-user-circle theme--light"></i></div>
</div>
<fieldset aria-hidden="true">
<legend style="width: 188.25px;"><span></span></legend>
</fieldset>
<div class="v-text-field__slot">
<label for="username" class="v-label v-label--active" style="left: -28px; right: auto; position: absolute;">
${msg("usernameOrEmail")}
</label>
<#if usernameEditDisabled??>
<input tabindex="1" id="username" placeholder="Ihr Nutzername" type="text" value="${(login.username!'')}" type="text" disabled>
<#else>
<input tabindex="1" id="username" placeholder="Ihr Nutzername" type="text">
</#if>
</div>
</div>
<div class="v-text-field__details">
<div class="v-messages theme--light">
<div class="v-messages__wrapper"></div>
</div>
</div>
</div>
</div>
</div>
<div class="${properties.kcFormGroupClass!}">
<label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
<input tabindex="2" id="password" class="${properties.kcInputClass!}" name="password" type="password" autocomplete="off" />
</div>
<div class="${properties.kcFormGroupClass!} ${properties.kcFormSettingClass!}">
<div id="kc-form-options">
<#if realm.rememberMe && !usernameEditDisabled??>
<div class="checkbox">
<label>
<#if login.rememberMe??>
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox" checked> ${msg("rememberMe")}
<#else>
<input tabindex="3" id="rememberMe" name="rememberMe" type="checkbox"> ${msg("rememberMe")}
</#if>
</label>
</div>
</#if>
</div>
<div class="${properties.kcFormOptionsWrapperClass!}">
<#if realm.resetPasswordAllowed>
<span><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></span>
</#if>
</div>
</div>
<div id="kc-form-buttons" class="${properties.kcFormGroupClass!} align-center justify-center">
<input type="hidden" id="id-hidden-input" name="credentialId" <#if auth.selectedCredential?has_content>value="${auth.selectedCredential}"</#if>/>
<button tabindex="4" name="login" id="kc-login" type="submit" class=" align-center justify-center v-btn rom__darkblue rom__text--white elevation-2 v-size--large">
<i class="v-icon v-icon--left fas fa-sign-in-alt"></i>
${msg("doLogIn")}
</button>
</div>
</form>
</#if>
</div>
<#if realm.password && social.providers??>
<div id="kc-social-providers" class="${properties.kcFormSocialAccountContentClass!} ${properties.kcFormSocialAccountClass!}">
<ul class="${properties.kcFormSocialAccountListClass!} <#if social.providers?size gt 4>${properties.kcFormSocialAccountDoubleListClass!}</#if>">
<#list social.providers as p>
<li class="${properties.kcFormSocialAccountListLinkClass!}"> <span>${p.displayName}</span></li>
</#list>
</ul>
</div>
</#if>
</div>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !registrationDisabled??>
<div id="kc-registration">
<span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
</#if>
</#if>
</#layout.registrationLayout>
It looks like you are using Vuetify styles only. I would try to use Vue with the top element:
new Vue({
el: "#kc-form",
vuetify: new Vuetify(),
...
And then I would create all inputs with Vuetify, e.g. username:
<v-text-field label="Username or email" id="username" />
But you need to mimic those original HTML inputs, so you need to add also some parameters, e.g. name - I would use mounted for that - naive implementation:
mounted() {
document.getElementById("username").setAttribute("name", "username")
}
It may need also changes in the layout template and more tweaks to have naive Vuetify feel and full Keycloak functionality. It will be nice if you share your results (even incomplete) on the GitHub.
Proof of concept: https://github.com/jangaraj/vuetify-keycloak-theme/ :
I'm trying to build something like the questions in OkayCupid, but all the questions - which are different forms - are located on the same component.
I use an object of questions and 3 possible answers for each question, and I use v-for to loop through the object and create cards with a question, 3 answers with radios, and a submit button.
The problem is that I want to get not only the answer the user chooses, but also the question it belongs to.
Here is my form in the template:
<div class="container">
<div class="row">
<div
class="col-lg-3 col-md-4 col-6"
v-for="(question,index) in questionCollection"
:key="index"
>
<form class="form">
<div class="img-fluid img-thumbnail shadow-lg p-3 mb-5 bg-white rounded">
<!-- <input type="text" :value="question.question" v-model="q" /> -->
<h3 class="d-block mb-4 h-100" alt data-holder-rendered="true">{{ question.question }}</h3>
<div class="card-body container">
<div class="card-text form-check">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="a1"
:value="question.answer1"
v-model="answer"
/>
<h4 class="font-weight-light" for="a1">{{ question.answer1 }}</h4>
</div>
<div class="card-text form-check">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="a2"
:value="question.answer2"
v-model="answer"
/>
<h4 class="font-weight-light" for="a2">{{ question.answer2 }}</h4>
</div>
<div class="card-text form-check">
<input
class="form-check-input"
type="radio"
name="gridRadios"
id="a3"
:value="question.answer3"
v-model="answer"
/>
<h4 class="font-weight-light" for="a3">{{ question.answer3 }}</h4>
</div>
</div>
<div class="card-text container">
<small class="text-muted">{{ question.user }}</small>
<button
href="#"
class="btn btn-primary my-3 mx-10 btn float-right shadow-sm rounded"
#click.prevent="answerQuestion"
>Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
And the script:
export default {
name: "questions",
data() {
return {
q: null,
answer: null
};
},
}
As you can see, at the beginning of the form, I tried to get the question element using v-model in a "fake" input, but it gives me an error that it's conflicted with the v-bind of the value (the question) I want to grab. Of course, I can't use v-model on the headline itself because Vue allows to use it only on inputs.
I've tried to change the v-model into v-model="questionCollection[index].question, but then I have no idea how to get it in the script and, let's say, log it to the console with the corresponding answer.
One way to handle this is to submit the question and answer together in the Save button's click-handler. That is, change answerQuestion() to receive question (the iterator variable in v-for) and answer, and update the Save button's click handler in the template to pass those two variables:
// template
<div v-for="(question, index) in questionCollection">
...
<button #click.prevent="answerQuestion(question, answer)">Save</button>
</div>
// script
answerQuestion(question, answer) {
console.log({ question, answer })
}
demo
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 want to hide html elements during the initial load, by clicking a button or link i will show those html elements. I can't find a solution to hide or show the element in vuejs2 version. I can able to see few options in vuejs but i am not sure how to use those methods. Below is my component code in that i want to hide the html element(id) "Message".
<template>
<div class="row">
<div class="col-lg-12">
<label class="checkbox checkbox-inline no_indent">
<input type="checkbox" value="">Show stats
</label>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">List Values</h3>
</div>
<div class="panel-body">
<button type="button" id="btn1" class="btn btn-warning btn-md" v-on:click="showWorkflow">Test 1</button>
<button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="showWorkflow">Test 2</button>
<button type="button" id="btn3" class="btn btn-info btn-md" v-on:click="showWorkflow">Test 3</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div id="Message">Hello i am here</div>
</div>
</template>
<script>
export default {
name: 'jobs',
methods: {
showWorkflow: function (e) {
console.log(e.target.id)
}
}
}
</script>
In Vue, you use the v-if directive to conditionally render elements.
You could also use the v-show directive if you wanted to just toggle the CSS display property.
See the section in the docs on Conditional Rendering for more info.
In your specific case, make showWorkflow a data property initially set to false.
Use this as the argument for a v-if directive on the content that you want to initially hide.
Then, when you want to show the content, set showWorkflow to true:
new Vue({
el: '#app',
data() {
return {
showWorkflow: false,
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<div v-if="showWorkflow">
Here is the workflow
</div>
<button #click="showWorkflow = true">Show Workflow</button>
</div>
Here is the documentation on conditional rendering in Vue
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.