I am using VueJS and Vuetify to create a modal that can accept some strings in the text field. Now what i want to do is to push the input string inside an array on click. So let's say if i input something and click create the resultant array is ['inputValue1'] but if i add another value by separating with a comma, the resultant array should be ['inputValue1', 'inputValue2'] instead i am getting it as ['inputValue1', 'inputValue1' 'inputValue2']. So the new value should be pushed to the new index instead of adding it with the last value.
Here is a demo
new Vue({
el: #app,
data() {
return {
dialog: false,
inputValue: ,
stringArray: []
};
},
methods: {
createArray() {
if (this.inputValue !== ) {
this.stringArray.push(this.inputValue);
console.log(this.stringArray);
}
},
closeDialog() {
this.dialog = false;
this.inputValue = ;
this.stringArray = [];
}
}
});<script src=https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js></script>
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js></script>
<div id=app>
<v-app id=inspire>
<v-layout justify-center>
<v-flex>
<v-btn color=primary @click=dialog=!dialog> Click Me </v-btn>
</v-flex>
</v-layout>
<v-dialog v-model=dialog width=350>
<v-card>
<v-card-title primary-title>
Create Array
</v-card-title>
<v-card-text>
<span class=title>How to create Array of Strings </span>
<v-layout justify-center>
<v-flex xs11>
<v-text-field v-model=inputValue></v-text-field>
</v-flex>
</v-layout>
</v-card-text>
<v-card-actions class=mt-5>
<v-spacer></v-spacer>
<v-btn @click=closeDialog>CLOSE</v-btn>
<v-btn @click=createArray :disabled=this.inputValue === '' color=primary>CREATE</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>Also on Cancel how can i set the input value and the array to an empty string and an empty array respectively. Thank You. I asked it yesterday but had to delete since i wasn't able to figure out the exact issue.
