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,
