v-for is rendering my list in one row with many columns instead of one column with many rows

Question

I want my list to be rendered like this:

1. A
2. B
3. C

Right now its being rendered like this: 1: A 2: B 3: C

Heres the code:

Todos:

    <input type="text" class = "todo" placeholder = "Next Item" v-on:keyup.enter="addItem()">
    <ol>
      <li v-for="(todo, index) in todos" class ="todos">
       {{index}}: {{ todo.text }}
      </li>
    </ol>

Heres the javascript portion:

addItem(){
  var text = event.target.value;
  this.todos.push({text, done: false, id: Date.now()})
  text = '';
}

Any help would be very appreciated!

Answer 1

Not entirely sure why yours is displaying any different, but here's a rough example:

 new Vue({ el: '#app', data() { return { todos: ['derek', 'was', 'here'], newTodo: '' } }, methods: { addTodo() { this.todos.push(this.newTodo); this.newTodo = ''; } } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div> <input v-model="newTodo" /> <button @click="addTodo">add</button> <ol> <li v-for="(todo, index) in todos" :key="index">{{todo}}</li> </ol> </div> </div> 

The only other thing I can think of is that you have some special CSS styling set that's causing the issue.