In my Laravel 2.6 application I need to show listing of radio inputs based on an array:
customerAccountTypeValueArray::[ { "key": "I", "label": "Individual" }, { "key": "B", "label": "Business" } ]
I do it as:
<div class="custom-control custom-radio m-3" v-for="nextCustomerAccountTypeValue, index in customerAccountTypeValueArray"
:key="nextCustomerAccountTypeValue.key">
<input
:id="'customer_account_type_' + nextCustomerAccountTypeValue.key"
type="radio"
name="radio_account_type"
class="custom-control-input"
v-model="customerRow.account_type"
:value="customerRow.account_type"
>
<label class="custom-control-label" :for="'customer_account_type_' + nextCustomerAccountTypeValue.key">{{ nextCustomerAccountTypeValue.label}}</label>
...
where customerRow is defined as:
customerRow: {
account_type: '',
...
As the result, I see my radio inputs, but selecting any of radio inputs, the customerRow.account_type value is not changed.
How can I fix it?
Replace
:value="customerRow.account_type"
with
:value="nextCustomerAccountTypeValue.key"
and it should work.
Related
From the title itself, I want to populate a dynamically created input box that I will load via AJAX upon page load.
<div class="col-md-10" id="app">
<div class="form-row" v-for="i in travellers">
<div class="form-group col-md-6" v-for="(details, index) in bookingRequiredDetails">
<label for="required-details">{{ details }}</label>
<input
type="text"
class="form-control"
#input="prop('traveller_' + i, details, $event)"
placeholder="Required Details"
/>
</div>
</div>
</div>
data () {
return {
bookingForm: {
...
bookingRequiredDetails: ''
},
travellerDetails: {},
}
},
load: function () {
... where the data variable has value upon page load
vm.bookingForm.bookingRequiredDetails = data.bookingRequiredDetails;
if (data.travellerDetails) {
vm.travellerDetails = data.travellerDetails;
}
}
Loaded Data:
The input boxes generated will depend on the required details. So for this instance, there will be 3 generated input boxes.
bookingRequiredDetails: Array(1)
0: Array(3)
0: "Full Name"
1: "Age"
2: "Gender"
travellerDetails: Array(1)
0:
traveller_1: Object
Age: "12"
Full Name: "Jane"
Gender: "M"
1: ...
2: ...
Sample Output:
What I want is to populate the existing travellerDetails object with data loaded from the server to their respective input boxes. However, I have problems with pairing the correct data to their respective key-value pairs of the input box as shown in the screenshot.
Any idea would be greatly appreciated.
So I manage to solve it. By adding v-model.
v-model="travellerDetails['traveller_' + i][details]"
div class="col-md-10" id="app">
<div class="form-row" v-for="i in travellers">
<div class="form-group col-md-6" v-for="(details, index) in bookingRequiredDetails">
<label for="required-details">{{ details }}</label>
<input
type="text"
class="form-control"
v-model="travellerDetails['traveller_' + i][details]"
#input="prop('traveller_' + i, details, $event)"
placeholder="Required Details"
/>
</div>
</div>
</div>
I'm trying to add a button to replace the words "View Details" within the table cell for every row. I've tried implementing a template and every time I save changes, the table returns no results which is telling me something is broken.
This is what the table currently looks like:
Here is my code:
<vue-good-table
:columns="columns"
:rows="rows"
:globalSearch="true"
:paginate="true"
:responsive="true"
:lineNumbers="false"
class="styled"
styleClass="table">
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'Details'">
<button type="button" class="btn btn-primary">
View Details
</button>
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
.
.
.
.
columns: [
{
label: "Date",
field: "date",
filterable: true
},
{
label: "Event",
field: "event",
filterable: true
},
{
label: "Details",
field: "details",
filterable: true
}
],
rows: [
{
event: "Thanksgiving Barrel Events",
details: "View Event",
date: "11/28/2018 at 6:34 PM"
},
{
event: "Christmas Barrel Events",
details: "View Event",
date: "12/25/2018 at 6:34 PM"
},
You've done everything right, except You left a typo in where You check if the column's field is "Details", while its 'details' (lowercase).
with strings, 'Details' does not equal to 'details' in javascript, as strings are case sensitive, never forget that.
So working code looks like this:
<vue-good-table
:columns="columns"
:rows="rows"
:globalSearch="true"
:paginate="true"
:responsive="true"
:lineNumbers="false"
class="styled"
styleClass="table">
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'details'">
<button type="button" class="btn btn-primary">
View Details
</button>
</span>
<span v-else>
{{props.formattedRow[props.column.field]}}
</span>
</template>
</vue-good-table>
Here's a working codepen:
https://codesandbox.io/s/nnpqpn6ll4?fontsize=14
I'd like to make default checked on radio buttons inside a v-for loop.
Here is the code:
<ul v-for="p in photos">
<li>
<div>
<div>
<div>
Visibility: {{p.visible}}
</div>
<strong>Visibility setting</strong><br>
<input type="radio" v-model="p.visible" name="visibility" value="all" :checked="p.visible == 'all'"> All <br>
<input type="radio" v-model="p.visible" name="visibility" value="fav" :checked="p.visible == 'fav'"> My favorites <br>
<input type="radio" v-model="p.visible" name="visibility" value="none" :checked="p.visible == 'none'"> No one
</div>
<div><img" v-bind:src="BASE_URL +'/uploads/' + userId + '/'+ p.imgId" /> </div>
</div>
</li>
</ul>
I followed this answer.
While I can see Visibility of each item is being printed, the default radio buttons of each photo are not checked as expected.
Here is the photos array which I receive from the server when the component is created:
[
{
"id" : "5bcebb6efeaea3147b7a22f0",
"imgId" : "12710.png",
"visible" : "all"
},
{
"id" : "5bcebbf0feaea3147b7a22f1",
"imgId" : "62818.png",
"visible" : "fav"
},
{
"id" : "5bcec010feaea3147b7a22f2",
"imgId" : "36740.png",
"visible" : "none"
}
],
What is wrong here and how can I fix it?
Don't use :checked:
v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.
If v-model is the same as value it will return true for that checkbox. Your fixed fiddle:
new Vue({
el: '#app',
data: {
photos: [{
"id": "5bcebb6efeaea3147b7a22f0",
"imgId": "12710.png",
"visible": "all"
},
{
"id": "5bcebbf0feaea3147b7a22f1",
"imgId": "62818.png",
"visible": "fav"
},
{
"id": "5bcec010feaea3147b7a22f2",
"imgId": "36740.png",
"visible": "none"
}
],
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<ul v-for="(p, index) in photos">
<li>
<div>
Visibility: {{p.visible}}
</div>
<strong>Visibility setting</strong><br>
<input type="radio" v-model="photos[index].visible" :name=`visibility-${index}` value="all"> All <br>
<input type="radio" v-model="photos[index].visible" :name=`visibility-${index}` value="fav"> My favorites <br>
<input type="radio" v-model="photos[index].visible" :name=`visibility-${index}` value="none"> No one
</li>
</ul>
</div>
Now each radio group has it's own name, with v-model targeting that group (note the index).
If I upload an image then drag it. It seems that input[type='file'] was static. Because the other value will be drag to other row only the input[type='file'] was remained. How can I move/drag it together with other value?
This is the jsfiddle
This is the HTML
<div id="main">
<h1>Vue Draggable Image</h2>
<div class="drag">
<h2>List 1 Draggable</h2>
<draggable v-model="list" class="dragArea" :options="{group:{ name:'people', pull:'clone', put:false }}">
<form v-for="(element, index) in list" :key="index" method="POST" enctype="multipart/form-data">
<input type="text" v-model="element.name">
<input type="file" id="reference_image" #change="onFileChange($event,index)" name="reference_image" accept="image/*" />
<img class="small_image" :src="reference_image" name="reference_image" />
</form>
</draggable>
</div>
</div>
This is the script
var vm = new Vue({
el: "#main",
data: {
list: [{
reference_image: "",
name: "name 1"
},
{
reference_image: "",
name: "name 2"
},
{
reference_image: "",
name: "name 3"
},
{
reference_image: "",
name: "name 4"
},
{
reference_image: "",
name: "name 5"
},
],
}
});
get it working by changing :key="index" to :key="element.name"
fiddles :
https://jsfiddle.net/amherve/sqebLtzc/3/
I want to list the names using handlebarjs. I need the language to be shown as list inside a dropdown.
Now am getting the dropdown with data displayed as a paragraph not list.
Here is the json file..
"Data": [
{
"FirstName": "Sam",
"MiddleName": "",
"LastName": "Thomson",
"Language": [
"English",
"French",
"Spanish",
"German",
"Hindi"
]
}
Here is the html file..
<td><label rel="popover" class="btn" data-title="Spl" data-content="{{Language}}"data-placement="bottom" >Language</label>
<div class="" id="spl">
<ul class=" nav"></ul>
</div>
</td>
You will need two block helpers:
with to "navigate" through the object's properties
each to iterate over an array
Here is how I would do it:
{{with Data}}
<ul>
{{each Language}}
<li>{{this}}</li>
{{/each}}
</ul>
{{/with}}
You need to do {{this}} since your array only contains strings.