Reset a const variable to its default value in vue
up vote
0
down vote
favorite
How can I reset the value of my constant variable in vue? Here is what I meant:
data(){
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
}
After that, I access it using the following:
<tr>
<th v-for="(col, index) in columns" :key="index.id">
<ui-select
:options="hdrList"
v-model="headercbo[index][hdrList[index]['label']]"
></ui-select>
</th>
</tr>
The output of this one is like this:
And when I click the clear button, this combo lists are not reverting back to default which it displays an empty or no selected value. Here's how I do it.
clearFields(){
this.columns = ;
this.headercbo = ;
}
But this one does not clear the fields, they still have the previous selected value with them. How can I totally clear them up and set backs to default.
vue.js combobox const
asked Nov 19 at 7:44
ramj
132115
add a comment |
up vote
0
down vote
favorite
How can I reset the value of my constant variable in vue? Here is what I meant:
data(){
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
}
After that, I access it using the following:
<tr>
<th v-for="(col, index) in columns" :key="index.id">
<ui-select
:options="hdrList"
v-model="headercbo[index][hdrList[index]['label']]"
></ui-select>
</th>
</tr>
The output of this one is like this:
And when I click the clear button, this combo lists are not reverting back to default which it displays an empty or no selected value. Here's how I do it.
clearFields(){
this.columns = ;
this.headercbo = ;
}
But this one does not clear the fields, they still have the previous selected value with them. How can I totally clear them up and set backs to default.
vue.js combobox const
asked Nov 19 at 7:44
ramj
132115
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
How can I reset the value of my constant variable in vue? Here is what I meant:
data(){
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
}
After that, I access it using the following:
<tr>
<th v-for="(col, index) in columns" :key="index.id">
<ui-select
:options="hdrList"
v-model="headercbo[index][hdrList[index]['label']]"
></ui-select>
</th>
</tr>
The output of this one is like this:
And when I click the clear button, this combo lists are not reverting back to default which it displays an empty or no selected value. Here's how I do it.
clearFields(){
this.columns = ;
this.headercbo = ;
}
But this one does not clear the fields, they still have the previous selected value with them. How can I totally clear them up and set backs to default.
vue.js combobox const
asked Nov 19 at 7:44
ramj
132115
How can I reset the value of my constant variable in vue? Here is what I meant:
data(){
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
}
After that, I access it using the following:
<tr>
<th v-for="(col, index) in columns" :key="index.id">
<ui-select
:options="hdrList"
v-model="headercbo[index][hdrList[index]['label']]"
></ui-select>
</th>
</tr>
The output of this one is like this:
And when I click the clear button, this combo lists are not reverting back to default which it displays an empty or no selected value. Here's how I do it.
clearFields(){
this.columns = ;
this.headercbo = ;
}
But this one does not clear the fields, they still have the previous selected value with them. How can I totally clear them up and set backs to default.
vue.js combobox const
vue.js combobox const
asked Nov 19 at 7:44
ramj
132115
asked Nov 19 at 7:44
ramj
132115
asked Nov 19 at 7:44
ramj
132115
asked Nov 19 at 7:44
ramj
132115
asked Nov 19 at 7:44
ramj
132115
132115
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
- Move the constant out of data.
- During reset, you've reassign the default headercbo value with the constant value.
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
export default {
data(){
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
},
clearFields() {
this.columns = ;
this.headercbo = _cboList;
}
}answered Nov 19 at 9:47
Raja Sekar
1,475620
Thanks for this. But with this one, it will returnReferenceError: _cboList is not definederror.
– ramj
Nov 19 at 9:50
I've moved _cboList out of data function, it won't through error.
– Raja Sekar
Nov 19 at 9:51
I've tried it out, but it's not clearing the fields :)
– ramj
Nov 19 at 9:55
can you make a simple example in codesandbox.io
– Raja Sekar
Nov 19 at 9:56
I'm sorry but I don't know how to make this kind of code :S All I just want is to empty the field when the reset button is clicked. Thanks for the help :)
– ramj
Nov 19 at 9:59
add a comment |
up vote
0
down vote
Put what you have in your data function into a method named initialData, then use that function in your data function and in your clearFields method.
data() {
return this.initialData();
},
methods: {
initialData() {
const _hdrList = [{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [{
start_time: ''
},
{
name: ''
},
{
another: ''
},
];
return {
hdrList: _hdrList,
headercbo: _cboList,
columns: [1,2],
}
},
clearFields() {
this.columns = ;
this.headercbo = this.initialData().headercbo;
}
}
answered Nov 19 at 12:04
Roy J
25.2k32954
Hi, I've tried it but returnsReferenceError: _cboList is not defined. also in my data, I have other data returned like :data(){ return { otherData:'', otherData1:'', otherData2:'', } }
– ramj
Nov 20 at 2:40
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
- Move the constant out of data.
- During reset, you've reassign the default headercbo value with the constant value.
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
export default {
data(){
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
},
clearFields() {
this.columns = ;
this.headercbo = _cboList;
}
}answered Nov 19 at 9:47
Raja Sekar
1,475620
Thanks for this. But with this one, it will returnReferenceError: _cboList is not definederror.
– ramj
Nov 19 at 9:50
I've moved _cboList out of data function, it won't through error.
– Raja Sekar
Nov 19 at 9:51
I've tried it out, but it's not clearing the fields :)
– ramj
Nov 19 at 9:55
can you make a simple example in codesandbox.io
– Raja Sekar
Nov 19 at 9:56
I'm sorry but I don't know how to make this kind of code :S All I just want is to empty the field when the reset button is clicked. Thanks for the help :)
– ramj
Nov 19 at 9:59
add a comment |
up vote
0
down vote
- Move the constant out of data.
- During reset, you've reassign the default headercbo value with the constant value.
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
export default {
data(){
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
},
clearFields() {
this.columns = ;
this.headercbo = _cboList;
}
}answered Nov 19 at 9:47
Raja Sekar
1,475620
Thanks for this. But with this one, it will returnReferenceError: _cboList is not definederror.
– ramj
Nov 19 at 9:50
I've moved _cboList out of data function, it won't through error.
– Raja Sekar
Nov 19 at 9:51
I've tried it out, but it's not clearing the fields :)
– ramj
Nov 19 at 9:55
can you make a simple example in codesandbox.io
– Raja Sekar
Nov 19 at 9:56
I'm sorry but I don't know how to make this kind of code :S All I just want is to empty the field when the reset button is clicked. Thanks for the help :)
– ramj
Nov 19 at 9:59
add a comment |
up vote
0
down vote
up vote
0
down vote
- Move the constant out of data.
- During reset, you've reassign the default headercbo value with the constant value.
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
export default {
data(){
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
},
clearFields() {
this.columns = ;
this.headercbo = _cboList;
}
}answered Nov 19 at 9:47
Raja Sekar
1,475620
- Move the constant out of data.
- During reset, you've reassign the default headercbo value with the constant value.
const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
export default {
data(){
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
},
clearFields() {
this.columns = ;
this.headercbo = _cboList;
}
}const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
export default {
data(){
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
},
clearFields() {
this.columns = ;
this.headercbo = _cboList;
}
}const _hdrList = [
{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [
{start_time:''},
{name:''},
{another:''},
];
export default {
data(){
return{
hdrList:_hdrList,
headercbo:_cboList,
columns:,
}
},
clearFields() {
this.columns = ;
this.headercbo = _cboList;
}
}answered Nov 19 at 9:47
Raja Sekar
1,475620
answered Nov 19 at 9:47
Raja Sekar
1,475620
answered Nov 19 at 9:47
Raja Sekar
1,475620
answered Nov 19 at 9:47
Raja Sekar
1,475620
1,475620
Thanks for this. But with this one, it will returnReferenceError: _cboList is not definederror.
– ramj
Nov 19 at 9:50
I've moved _cboList out of data function, it won't through error.
– Raja Sekar
Nov 19 at 9:51
I've tried it out, but it's not clearing the fields :)
– ramj
Nov 19 at 9:55
can you make a simple example in codesandbox.io
– Raja Sekar
Nov 19 at 9:56
I'm sorry but I don't know how to make this kind of code :S All I just want is to empty the field when the reset button is clicked. Thanks for the help :)
– ramj
Nov 19 at 9:59
add a comment |
Thanks for this. But with this one, it will returnReferenceError: _cboList is not definederror.
– ramj
Nov 19 at 9:50
I've moved _cboList out of data function, it won't through error.
– Raja Sekar
Nov 19 at 9:51
I've tried it out, but it's not clearing the fields :)
– ramj
Nov 19 at 9:55
can you make a simple example in codesandbox.io
– Raja Sekar
Nov 19 at 9:56
I'm sorry but I don't know how to make this kind of code :S All I just want is to empty the field when the reset button is clicked. Thanks for the help :)
– ramj
Nov 19 at 9:59
Thanks for this. But with this one, it will return
ReferenceError: _cboList is not defined error.– ramj
Nov 19 at 9:50
Thanks for this. But with this one, it will return
ReferenceError: _cboList is not defined error.– ramj
Nov 19 at 9:50
I've moved _cboList out of data function, it won't through error.
– Raja Sekar
Nov 19 at 9:51
I've moved _cboList out of data function, it won't through error.
– Raja Sekar
Nov 19 at 9:51
I've tried it out, but it's not clearing the fields :)
– ramj
Nov 19 at 9:55
I've tried it out, but it's not clearing the fields :)
– ramj
Nov 19 at 9:55
can you make a simple example in codesandbox.io
– Raja Sekar
Nov 19 at 9:56
can you make a simple example in codesandbox.io
– Raja Sekar
Nov 19 at 9:56
I'm sorry but I don't know how to make this kind of code :S All I just want is to empty the field when the reset button is clicked. Thanks for the help :)
– ramj
Nov 19 at 9:59
I'm sorry but I don't know how to make this kind of code :S All I just want is to empty the field when the reset button is clicked. Thanks for the help :)
– ramj
Nov 19 at 9:59
add a comment |
up vote
0
down vote
Put what you have in your data function into a method named initialData, then use that function in your data function and in your clearFields method.
data() {
return this.initialData();
},
methods: {
initialData() {
const _hdrList = [{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [{
start_time: ''
},
{
name: ''
},
{
another: ''
},
];
return {
hdrList: _hdrList,
headercbo: _cboList,
columns: [1,2],
}
},
clearFields() {
this.columns = ;
this.headercbo = this.initialData().headercbo;
}
}
answered Nov 19 at 12:04
Roy J
25.2k32954
Hi, I've tried it but returnsReferenceError: _cboList is not defined. also in my data, I have other data returned like :data(){ return { otherData:'', otherData1:'', otherData2:'', } }
– ramj
Nov 20 at 2:40
add a comment |
up vote
0
down vote
Put what you have in your data function into a method named initialData, then use that function in your data function and in your clearFields method.
data() {
return this.initialData();
},
methods: {
initialData() {
const _hdrList = [{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [{
start_time: ''
},
{
name: ''
},
{
another: ''
},
];
return {
hdrList: _hdrList,
headercbo: _cboList,
columns: [1,2],
}
},
clearFields() {
this.columns = ;
this.headercbo = this.initialData().headercbo;
}
}
answered Nov 19 at 12:04
Roy J
25.2k32954
Hi, I've tried it but returnsReferenceError: _cboList is not defined. also in my data, I have other data returned like :data(){ return { otherData:'', otherData1:'', otherData2:'', } }
– ramj
Nov 20 at 2:40
add a comment |
up vote
0
down vote
up vote
0
down vote
Put what you have in your data function into a method named initialData, then use that function in your data function and in your clearFields method.
data() {
return this.initialData();
},
methods: {
initialData() {
const _hdrList = [{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [{
start_time: ''
},
{
name: ''
},
{
another: ''
},
];
return {
hdrList: _hdrList,
headercbo: _cboList,
columns: [1,2],
}
},
clearFields() {
this.columns = ;
this.headercbo = this.initialData().headercbo;
}
}
answered Nov 19 at 12:04
Roy J
25.2k32954
Put what you have in your data function into a method named initialData, then use that function in your data function and in your clearFields method.
data() {
return this.initialData();
},
methods: {
initialData() {
const _hdrList = [{
label: 'start_time',
value: 'start_time'
},
{
label: 'name',
value: 'name'
},
{
label: 'another',
value: 'another'
},
];
const _cboList = [{
start_time: ''
},
{
name: ''
},
{
another: ''
},
];
return {
hdrList: _hdrList,
headercbo: _cboList,
columns: [1,2],
}
},
clearFields() {
this.columns = ;
this.headercbo = this.initialData().headercbo;
}
}
answered Nov 19 at 12:04
Roy J
25.2k32954
answered Nov 19 at 12:04
Roy J
25.2k32954
answered Nov 19 at 12:04
Roy J
25.2k32954
answered Nov 19 at 12:04
Roy J
25.2k32954
25.2k32954
Hi, I've tried it but returnsReferenceError: _cboList is not defined. also in my data, I have other data returned like :data(){ return { otherData:'', otherData1:'', otherData2:'', } }
– ramj
Nov 20 at 2:40
add a comment |
Hi, I've tried it but returnsReferenceError: _cboList is not defined. also in my data, I have other data returned like :data(){ return { otherData:'', otherData1:'', otherData2:'', } }
– ramj
Nov 20 at 2:40
Hi, I've tried it but returns
ReferenceError: _cboList is not defined. also in my data, I have other data returned like : data(){ return { otherData:'', otherData1:'', otherData2:'', } }– ramj
Nov 20 at 2:40
Hi, I've tried it but returns
ReferenceError: _cboList is not defined. also in my data, I have other data returned like : data(){ return { otherData:'', otherData1:'', otherData2:'', } }– ramj
Nov 20 at 2:40
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370288%2freset-a-const-variable-to-its-default-value-in-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
