I'm trying to get the selected image value and sent it to the database. Right now I can send only the input value to the database but I need that value to be the selected image. Basically I need to use v-model and :value at the same time, right now the input value is empty.
<img class="head" :src="head" v-if="head" #click="loadHead();">
<img class="body" :src="body" v-if="body" #click="loadBody();">
<img class="feet" :src="feet" v-if="feet" #click="loadFeet();">
<div class="row name justify-content-center">
<div class="col-sm-12 col-lg-6">
<div class="form-group">
<label>Valitud pea:</label>
<input class="valikud" v-model="post.head"><b>Valitud pea: </b> {{head}}>
<pre>{{ head }}</pre>
<p class="valikud" v-if="body"><b>Valitud keha: </b> {{body}}</p>
<p class="valikud" v-if="feet"><b>Valitud jalad: </b> {{feet}}</p>
</div>
</div>
</div>
You can set a default data when your component is mounted.
mounted () {
if (this.post.head === '') {
this.post.head = this.head
}
}
Related
In the application, we used the input mask of jquery in one of the module.
In that module, there's a tab. whenever I tried to change the tab or submit it.
The value of tin is always null
Blade file
<div wire:ignore.self class="tab-pane active" class="tab-pane " id="vendor-customer-tab" role="tabpanel">
<div class="mb-3 row">
<label for="bank-account-number" class="col-md-3 col-form-label">TIN<span class="required">*</span></label>
<div class="col-md-9">
<!-- <input class="form-control tin-mask" type='text' id="tin_num" placeholder="Enter TIN Number" > -->
<input class="form-control tin-mask" type='text' id="tin_num" placeholder="Enter TIN Number" wire:model.defer="tin">
<!-- <input type="hidden" name="tin_num" wire:model.defer="tin"/> -->
#error('tin')
<span class="text-danger">
{{$message}}
</span>
#enderror
</div>
</div>
</div>
Script
<script type="text/javascript">
$(document).ready(function(){
$('.tin-mask').inputmask("999-999-999-999");
$(".tin-mask").val("000-000-000-000");
// $('#tin_num').change(function(e){
// var tin_number = $('#tin_num').val();
// $("input[name='tin_num']").val(tin_number);
// e.preventDefault();
// return false;
// });
// $(".tin-mask").attr("value", "000-000-000-000");
});
</script>
Question: Why everytime I tried to change the tab or submit, the value of TIN becomes blanks.?
Probably because
wire:model.defer="tin"
and
$(".tin-mask").val("000-000-000-000");
don't go hand-in-hand. jQuery sets the value, but wire:model also sets the value and so far $tin probably has no value.
I am trying to output the value of individual checkboxes and also add a class to the label when the checkbox is checked. I can do one of the other but not both together. If I add :value="attendance" the output works as individual instances but the adding of the class doesn't work and if I add value="attendance" then it treats the 2 checkboxes as one value.
Can someone help please?
<div class="container">
<div class="row">
<div class="col-sm">
<label
class="btn btn-outline-primary label-in-filter"
:class="{
showattendances:
showattendancesisChecked('attendance'),
}"
v-for="attendance in uniqueattendances"
:key="attendance"
>
<!-- <input
value="attendance"
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
v-model="attendances"
/> -->
<input
id="attendance"
name="showattendances"
class="ck-in-filter"
type="checkbox"
:value="attendance"
v-model="attendances"
/>
{{ attendance }}
</label>
</div>
<p v-for="attendance in attendances" :key="attendance">
{{ attendance }}
</p>
</div>
</div>
methods: {
showattendancesisChecked(value) {
return this.attendances.includes(value);
},}
I'm trying to focus on several elements of my form but the first one, despite being applied, returns an error by console.
This is my template:
<div class="container">
<div class="col-xs-12">
<div class="row">
<h1 class="animal-title">Your selection is : </h1>
</div>
<div class="wrapper">
<form class="first-form" #submit.prevent="onSubmit">
<div class="image-wrapper">
<div class="sel-image">
<div v-on:click="imageSelected = true" v-for="item in items" v-bind:key="item.id">
<label>
<input
type="radio"
name="selectedItem"
ref="item"
:value="item.id"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)"
/>
<img v-if="item.id === 1" src="../../assets/1.png" />
<img v-if="item.id === 2" src="../../assets/2.png" />
<img v-if="item.id === 3" src="../../assets/3.png" />
</label>
<p class="cie-animal-subtitle">{{item.name}}</p>
</div>
</div>
</div>
<div class="form-select">
<div v-show="filteredStock && (imageSelected || itemFormInfo.selectedItem) > 0">
<h1 v-if="this.itemName === 'Phone' || this.itemName === 'Tablet'" for="selectedItem" ref="itemVisible">
Select the brand of your <span>{{this.itemName}}</span> :
</h1>
<h1 v-if="this.itemName === 'PC'" for="selectedBreed" ref="itemVisible">
Select the type of your <span>{{this.itemName}}</span> :
</h1>
<select
ref="brand"
class="form-control"
id="selectedBrand"
v-model="itemFormInfo.selectedBrand"
#change="onChangeBrand($event)">
<option v-for="brand in filteredBrand" v-bind:key="brand.name">{{ brand.name }}</option>
</select>
<div v-show="this.isBrandSelected">
<h1>What are you going to use your
<span>{{itemName}}</span> for ?
</h1>
<input
type="text"
id="componentName"
ref="componentName"
class="form-control fields"
style="text-transform: capitalize"
v-model="itemFormInfo.component"
#keypress="formChange($event)"
/>
<div class="loader-spinner" v-if="loading">
<app-loader/>
</div>
</div>
</div>
</div>
<div class="service-options" v-show="isComponentCompleted">
<div class="from-group">
<h1>
Here are the options for your <span>{{this.itemFormInfo.component}}</span> :
</h1>
<div class="services">
<div class="column-service" v-for="option in options" v-bind:key="option.name">
<div class="service-name">{{option.name}}</div>
<div class="service-price">{{option.price.toString().replace(".", ",")}} </div>
</div>
</div>
and here my first method
onChangeItem(event) {
let item = event.target._value;
this.itemName = this.getItemName(item);
if (this.isItemSelected = true) {
this.isItemSelected = false;
this.isComponentCompleted = false;
this.isLoaderFinished = false;
this.itemFormInfo.name = ""
}
this.$refs.item.focus();
},
in this function that I control my first input, the focus is working but it returns me by console the following error:
"this.$refs.item.focus is not a function at VueComponent.onChangeItem"
I have seen some references to similar cases where they involved the reference in a setTimeout or used the this.$nextTick(() => method but it didn't work in my case.
What am I doing wrong?
How can I focus on the next select with ref brand, once I have chosen the value of the first input?
Thank you all for your time and help in advance
How can I focus on the next select with ref brand, once I have chosen the value of the first input?
You want to put focus on brand but your onChangeItem handler is calling this.$refs.item.focus() (trying to focus item). Seems strange to me...
Reason for the error is you are using ref inside v-for.
Docs: When used on elements/components with v-for, the registered reference will be an Array containing DOM nodes or component instances
So the correct way for accessing item ref will be this.$refs.item[index].focus().
Just be aware that right now v-for refs do not guarantee the same order as your source Array - you can find some workarounds in the issue discussion...
Facing an Weird Issue in Vuejs.. I am using firestore to get data using props as id for the singlepost...
Now array formed is fine.. as you can see in the screenshot... there is no error in the console, i am seeing data... but its not working for its child key element.. attaching another screenshot of code.i guess if {{temple}} is working then {{temple.templename}} should work fine also
<div class="appCapsule">
{{temple}}
<div class="section mt-2">
<div class="card text-center">
<div class="card-header">
{{temple.templename}}
</div>
<div class="card-body">
<img v-bind:src="'https://awesong.in/jain/storage/temples/' + temple.fileToUpload1" style="width:100%">
<p class="card-text">Temple Type : {{temple.templetype}}</p>
<p class="card-text">Near By City : {{temple.nearbycity}}</p>
<p class="card-text">Built in : {{temple.built}}</p>
<p class="card-text">Address : {{temple.address}}</p>
<p class="card-text">Location : {{temple.location}}</p>
<p class="card-text">District : {{temple.district}}</p>
<p class="card-text">State : {{temple.state}}</p>
<p class="card-text">Phone : {{temple.phone}}</p>
<p class="card-text">Email : {{temple.email}}</p>
<p class="card-text">Website : {{temple.website}}</p>
<p class="card-text">Views : {{temple.clicks}}</p>
</div>
</div>
</div>
</div>
Image attached for reference
Temple is an array of JSON objects. You could use temple[0].property, or you could loop over it:
<div v-for="t in temple" :key="JSON.stringify(t)">
{{t.templename}} // etc
</div>
I use single reactive form as insert and update operation in both case radio button needed to be checked - how can I fix this issue?
Here is the field I use
<div class="form-group">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<input type="radio" formControlName="reportheader" id="reportheader0" [value]="0" (change)="isRhChanged()" [(ngModel)]="reportSettingData?.header_option"> According to present format
</div>
<div class="col-sm-6">
<input type="radio" formControlName="reportheader" id="reportheader1" [value]="1" (change)="isRhChanged()" [(ngModel)]="reportSettingData?.header_option"> Will use a customized header
</div>
</div>
</div>
</div>
</div>
Error:
Parser Error: The '?.' operator cannot be used in the assignment at column 34
For the default value to be checked, I use this code in the component:
this.rForm.patchValue({ reportheader: '0' });