CODEWITHSUNDEEP
javascriptarraysvue.js
Somethingwhatever
Somethingwhatever

Reputation: 1348

How to create array of strings in VueJS?

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.

Upvotes: 2

Views: 16806

Answers (2)

Eggon
Eggon

Reputation: 2356

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

Upvotes: 3

Nicolas
Nicolas

Reputation: 43

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 = []
}
}
 });

Upvotes: 2

Related Questions