I have form input using Vue on my project , but in my input 1 field select box cannot record on my sending input ( always null) , another filed like tipe text , number its work , but only this select box cannot record on input
its my input
// this field select cant record ( always give null ) ,
<div class="field">
<div class="select">
<select name="anak_id">
<option v-for="(invent, id) in kod_rek" :key="id" :value="id">
{{ invent }}
</option>
</select>
</div>
</div>
// and this field work normally
<div class="field">
<label for="kode_rekening">kode rekening</label>
<input
type="text"
id="kode_rekening"
class="input"
:value="userData.kode_rekening"
#input="userData.kode_rekening = $event.target.value"
>
<div v-if="errors && errors.kode_rekening" class="text-danger">{{ errors.kode_rekening[0] }}</div>
</div>
and on this export default
export default {
data(){
return{
fields: {},
errors: {},
userData:{
anak_id:'',
kode_rekening:'',
uraian:'',
anggaran:'',
},
kod_rek:{},
isSubmited: true,
}
},
created(){
axios.get('/users/get_data_turunan_anak').then((res)=>{
this.kod_rek = res.data
// console.log(res.data)
}).catch((err) => {
console.log(err)
});
}
methods:{
submited(){
this.isSubmited = true;
},
submit() {
this.errors = {};
axios.post('/users/input_turunan_anak', this.userData).then(response => {
window.location = response.data.redirect;
}).catch(error => {
if (error.response.status === 422) {
this.errors = error.response.data.errors || {};
}
});
},
},
only my select box cant storing on this input , whats this problem and my network having error
message: "SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'anak_id' cannot be null (SQL: insert into turunan_anak (anak_id, kode_rekening, uraian, anggaran, updated_at, created_at)
Try using #change event for the select box.You can also use v-model for this use case. v-model directive will help you to create two-way data bindings.
Related
I have an vs-input with :id=info.tag. How can I change the input value based on the :id tag? Data is dynamic
<template>
<vs-row vs-type="flex" vs-justify="space-around">
<div v-for="info in information" :key="info.id">
<vs-col vs-type="flex" vs-justify="center" vs-align="center" vs-w="3">
<vx-card :title="info.user_1" :subtitle="info.desc">
<div slot="footer">
<vs-row vs-justify="center">
<vx-input-group class="mb-base">
<vs-input :id="info.tag" placeholder="Data Output" readonly />
<br>
<div class="text-center">
<vs-button color="primary" #click="grabData($event, generator.tag)">Grab data</vs-button>
</div>
</vx-input-group>
</vs-row>
</div>
</vx-card>
</vs-col>
</div>
</vs-row>
</template>
<script>
export default {
data() {
return {
information: null
}
},
created () {
this.$store.dispatch('user/getInformation').then(this.$$nextTick).then(() => {
this.information = this.$store.state.user.information
})
},
methods: {
grabData(data, tag) {
this.$store.dispatch('user/grabData', {tag})
.then(res => {
//Nice! Set input value based on the tag
})
.catch(error => {
//hmm
})
},
}
}
</script>
I'll assume that each item in information has a field named value
Then you can just change vs-input to this
If you don't have a field name value you can add it
created () {
this.$store.dispatch('user/getInformation').then(this.$$nextTick).then(() => {
this.information = this.$store.state.user.information.map(item => Object.assign({value:''}, item))
})
}
So given vs-input I assume you are using VueSax.
It has v-model property which will line up to the value.
add v-model to vs-input
<vs-input :id="info.tag" v-model="infoInput" placeholder="Data Output" readonly/>
make sure to include property into data
data() {
return {
information: null,
infoInput: '',
}
},
then when you have an event just change the value.
this.infoInput = "new value"
This will update the value in vs-input
More info can be found v-model api
I have the following form:
This is the edit form.
As you can see I have a multiple select. I need to bind the values from the server to the select.
Here is structure of my objects from the server.
1) All elements for the multiple select:
2) Particular objects, that I want to see selected. As you can see, there's an additional field called 'pivot'.
As a result, I would like to see the following when I open my form:
I have tried something like this, but without success:
<div class="form-group">
<label for="bk">Связанные бк</label>
<select class="form-control form-control-sm" id="bk" v-model="formFields.applicationBk" multiple>
<option v-for="bk in allBk" v-if="applicationBk.find(x => x.id === bk.id) 'selected'" >
{{ bk.name }}
</option>
</select>
Here is full js code:
<script>
import { EventBus } from '../../app';
export default {
name: "ApplicationEdit",
props: ['applicationId', 'name', 'offer', 'bundleId', 'isBlackMode', 'applicationBk', 'allBk'],
mounted: function(){
console.log(this.applicationBk)
},
methods:{
submit: function (e) {
window.axios.post('/application/edit/' + this.applicationId, this.formFields)
.then(res => {
console.log('Сохранил!');
$('#applicationEdit' + this.applicationId).modal('hide');
EventBus.$emit('reloadApplicationsTable');
}).catch(err => {
if(err.response.status === 422){
this.errors = err.response.data.errors || [];
}
//console.error('Ошибка сохранения приложения. Описание: ');
console.error(err)
});
}
},
data(){
return {
formFields: {
applicationId: this.applicationId,
applicationBk: this.applicationBk,
name: this.name,
offer: this.offer,
bundle_id: this.bundleId,
giraffe: this.isBlackMode,
bk: this.applicationBk,
},
errors: []
}
}
}
You might consider using your loop as you have but using v-model to an array of the selected values. Here is vue's example of this: https://v2.vuejs.org/v2/guide/forms.html#Select
My view blade laravel like this :
<form slot="search" class="navbar-search" action="{{url('search')}}">
<search-header-view></search-header-view>
</form>
The view blade laravel call vue component (search-header-view component)
My vue component(search-header-view component) like this :
<template>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q" autofocus v-model="keyword" :value="keyword">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" ref="submitButton"><span class="fa fa-search"></span></button>
</span>
<ul v-if="!selected && keyword">
<li v-for="state in filteredStates" #click="select(state.name)">{{ state.name }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'SearchHeaderView',
components: { DropdownCategory },
data() {
return {
baseUrl: window.Laravel.baseUrl,
keyword: null,
selected: null,
filteredStates: []
}
},
watch: {
keyword(value) {
this.$store.dispatch('getProducts', { q: value })
.then(res => {
this.filteredStates = res.data;
})
}
},
methods: {
select: function(state) {
this.keyword = state
this.selected = state
this.$refs.submitButton.click();
},
input: function() {
this.selected = null
}
}
}
</script>
If I input keyword "product" in input text, it will show autocomplete : "product chelsea", "product liverpool", "product arsenal"
If I click "product chelsea", the url like this : http://myshop.dev/search?q=product
Should the url like this : http://myshop.dev/search?q=product+chelsea
I had add :value="keyword" in input type text to udpate value of input type text, but it does not work
How can I solve this problem?
Update
I had find the solution like this :
methods: {
select: function(state) {
this.keyword = state
this.selected = state
const self = this
setTimeout(function () {
self.$refs.submitButton.click()
}, 1500)
},
...
}
It works. But is this solution the best solution? or there is another better solution?
Instead of timeout you can use vue's nextTick function.
I didn't checked your code by executing but seems its problem regarding timings as when submit is pressed your value isn't updated.
so setTimeout is helping js to buy some time to update value, but its 1500 so its 1.5 second and its little longer and yes we can not identify how much time it will take each time so we tempted to put max possible time, still its not perfect solution
you can do something like this. replace your setTimeout with this one
const self = this
Vue.nextTick(function () {
// DOM updated
self.$refs.submitButton.click()
})
nextTick will let DOM updated and set values then it will execute your code.
It should work, let me know if it works or not.
I populate a dropdown, based on the result of another dropdown. And if i got a default value i want to set the second dropdown.
select country so i get al the country regions.
If i am on my edit page i already have the country id, so i trigger the ajax request on created() and populate the regions select.Ofc i have the region id and i would like to set it.
getRegions() {
let countryId = this.form.country_id;
if (countryId) {
axios.get('/getRegion/' + countryId)
.then(response => {
this.regions = response.data;
if (this.regions && this.form.country_region_id) {
this.$nextTick(() => {
$(".country_region").dropdown("set selected",
this.form.country_region_id).dropdown("refresh");
});
/*
setTimeout(() => {
$(".country_region").dropdown("set selected",
this.form.country_region_id).dropdown("refresh");
}, 1000);
*/
}
})
.catch(error => {
this.errors.push(error)
});
}
},
The code segment with the setTimeout is working 1sec later the correct value is selected.
Edit:
My dropdown actually got a wrapper component, so i can use v-model on it.
But the nextTick still doesnt seem to work.
<sm-dropdown v-model="form.country_region_id" class="country_region">
<input type="hidden" :value="form.country_region_id" id="country_region_id">
<div class="default text">Gebiet</div>
<i class="dropdown icon"></i>
<div class="menu">
<div v-for="region in regions" class="item" :data-value="region.country_region_id"
:key="region.country_region_id" >
{{ region.internal_name }}
</div>
</div>
</sm-dropdown>
Dropdown component:
<template>
<div class="ui fluid search selection dropdown" ref="input">
<slot></slot>
</div>
</template>
<script>
export default {
props: ['value'],
mounted() {
let self = this;
$(this.$el)
.dropdown()
.dropdown({
forceSelection: false,
onChange: function(value) {
self.$emit('input', value);
self.$emit('change');
}
}).dropdown("refresh")
;
}
}
</script>
I am not able to populate the updated data to the child component when doing on-change from a select box with local data/object. But I am able to load data to the child component everytime when I click the submit button with the help of API. I need help to refresh my child component with my updated data when I do the on-change from the select box. Find the below code which I'm trying. That too when I do on-change first time it was updating the props in child component, but when I do the same it is not going to the child component, it stops i the parent component itself.
Component-1:
<template>
<div>
<div class="row">
<select v-model="selectedemp" #change="filterempdata($event.target.value)">
<option value="">Select emp/option>
<option v-for="option in empfilterlist" v-bind:value="option.value" v-bind:key="option.value">{{ option.text }}</option>
</select>
</div>
<div class="compone">
<empView v-if='loaded' :empDetails='empData'></empView>
</div>
<div class="col-lg-6 col-md-6">
<button type="button" id="btn2" class="btn btn-danger btn-md" v-on:click="getEmpDetails">Fetch Data</button>
</div>
</div>
</template>
<script>
import updatedemp from './empView'
export default {
name: 'cluster',
components: {
'empView': updatedemp
},
data () {
return {
loaded: false,
emptData: {},
empfilterlist: [
{ text: 'Department', value: '1' },
{ text: 'Status', value: '2' },
],
selectedemp: '',
}
},
methods: {
filterempdata: function (selectedoption) {
console.log('Onchange value - ' + selectedOption)
Vue.set(this.empData, 'Department', selectedoption)
},
getEmpDetails: function () {
this.$http.get('http://localhost:7070/getemmdata')
.then((response) => {
this.empData = response.data
this.loaded = true
},
response => {
console.log('test' + JSON.stringify(response))
}
)
}
}
}
</script>
Component: 2
<template>
<div class="empView">
<div class="col-lg-6 col-md-6">
<h3>{{ empid }}</h3>
</div>
<div class="col-lg-6 col-md-6">
{{ empname }}
</div>
</div>
</template>
<script>
export default {
name: 'empView',
props: ['empDetails'],
data () {
return {
empid: this.empDetails.id,
empname: this.empDetails.name
}
},
watch: {
workflowDetails: function (changes) {
console.log('data updated ' + JSON.stringify(changes))
this.empid = changes.id
this.empname = changes.name
this.department = changes.Department
}
}
}
</script>
Your first problem is here:
filterempdata: function (selectedoption) {
console.log(')
this.empData.WorkflowFilter = selectedoption
this.empData = this.empData
}
By default, empData is:
data () {
return {
loading: false,
emptData: null,
So this.empData.WorkflowFilter = selectedoption should not work, as well as this.empData = this.empData does nothing.
Just make the default value an empty object and update it according to selection (just setting WorkflowFilter).
This should do the trick. Another weird this is the loading property. Your second component will be visible only if loading = true, which is odd. Maybe use loaded instead?