[英]v-for is rendering my list in one row with many columns instead of one column with many rows
I want my list to be rendered like this: 我希望我的列表呈现如下:
Right now its being rendered like this: 1: A 2: B 3: C 现在,其呈现方式如下:1:A 2:B 3:C
Heres the code: 这是代码:
<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: 继承人的JavaScript部分:
addItem(){
var text = event.target.value;
this.todos.push({text, done: false, id: Date.now()})
text = '';
}
Any help would be very appreciated! 任何帮助将不胜感激!
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. 我唯一能想到的是,您有一些导致问题的特殊CSS样式集。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.