javascript - v-for 将我的列表渲染为一行多列，而不是一列多行

Question

我希望我的列表呈现如下:

1. 一个
2. B
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 样式集导致了问题。