How to create array of strings in VueJS?

Question

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.

Not sure what's your problem, the createArray method adds strings to the array correctly. You don't have it attached to any click event though — Eggon
– Eggon, Commented Apr 14, 2020 at 20:08
@Eggon Thank you so much!! sometimes i guess that's all you need. — Somethingwhatever
– Somethingwhatever, Commented Apr 14, 2020 at 20:14

Eggon · Accepted Answer · 2020-04-14 20:15:14Z

3

Your `createArray' method is not attached to any click event. Other than that the code is correct. :)

answered Apr 14, 2020 at 20:15

Eggon

2,4262 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicolas · Accepted Answer · 2020-04-14 20:15:13Z

2

You should clear the inputValue after the value is pushed to the array like this:

methods: {
createArray() {
  if (this.inputValue !== "") {
    this.stringArray.push(this.inputValue);
    this.inputValue = '';
    console.log(this.stringArray);
  } else {
  console.log('The inputValue is empty')
 }
},
closeDialog() {
  this.dialog = false;
  this.inputValue = "";
  this.stringArray = []
}
}
 });

answered Apr 14, 2020 at 20:15

Nicolas

437 bronze badges

1 Comment

Somethingwhatever Over a year ago

yup applied this as well. Thank you!!

Collectives™ on Stack Overflow

How to create array of strings in VueJS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related