v-for將我的列表顯示在多列的一行中，而不是一列多行

Question

我希望我的列表呈現如下：

1. 一種
2. 乙
3. C

現在，其呈現方式如下：1：A 2：B 3：C

這是代碼：

待辦事項：

    <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>

繼承人的JavaScript部分：

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

任何幫助將不勝感激！

Answer 1

不能完全確定為什么您的顯示器會顯示任何不同，但這是一個粗糙的示例：

 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> 

我唯一能想到的是，您有一些導致問題的特殊CSS樣式集。