CODEWITHSUNDEEP
javascriptvue.js
user11606914
user11606914

Reputation:

How to loop using v-for in VueJS?

I am trying to loop in VueJS using v-for but for some reason the text doesn't seem to be rendering. Not sure what i am doing wrong?

This is my sample pen

new Vue({
  el: "#app",
  data() {
    return {
      inputValue: "",
      myArray: []
    };
  },
  methods: {
    createArray() {
      this.myArray.push(this.inputValue);
      console.log(this.myArray);
    },
    clear() {
      this.inputValue = "";
      this.myArray = [];
      console.log(this.myArray);
    }
  }
});
<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>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app id="inspire">
    <v-layout justify-center>
      <v-flex xs6>
        <v-text-field v-model="inputValue">
        </v-text-field>
        <v-btn :disabled="inputValue === ''" @click="createArray">Click Me</v-btn>
        <v-btn @click="clear">Clear</v-btn>
        <div v-if="myArray.length > 0">
          <div v-for="(item,i) in myArray"></div>
          <li>{{item}}</li>
        </div>
      </v-flex>
    </v-layout>
  </v-app>
</div>

Any help will be appreciated. Thank you,

Upvotes: 2

Views: 56

Answers (1)

BTL
BTL

Reputation: 4666

You put a </div> at the wrong place.

Here it should be : 

<div v-for="(item,i) in myArray">
  <li>{{item}}</li>
</div>

Upvotes: 1

Related Questions