[英]Vue.js v-model data object
So I just started playing around with Vue.js. 所以我才开始玩Vue.js。 But I am having some problems with simple tasks like adding new "news item" to the array.
但是我在一些简单的任务上遇到了一些问题,例如向数组添加新的“新闻项”。 JSFiddle included so if someone can tell me what I am doing wrong..
JSFiddle包括在内,以便有人可以告诉我我做错了什么..
http://jsfiddle.net/pL5taqp6/ http://jsfiddle.net/pL5taqp6/
HTML HTML
<div id="app">
<input type="text" v-model="news.title">
<input type="text" v-model="news.url">
<ul>
<li v-for="n in news">
{{ n.title }} - {{ n.url }}
</li>
</ul>
</div>
JS JS
new Vue({
el: '#app',
data: {
news: [
{ title: 'Test Title', url: '/test-title'}
]
}
});
You need a separate method to add items to news
array. 您需要一个单独的方法将项目添加到
news
数组。 I added super simple variant of such function. 我添加了此类功能的超级简单变体。
http://jsfiddle.net/00953sor/ http://jsfiddle.net/00953sor/
HTML: HTML:
<div id="app">
<form @submit="addItem">
<input type="text" v-model="itemTitle">
<input type="text" v-model="itemUrl">
<button type="submit">Add</button>
</form>
<ul>
<li v-for="n in news">
{{ n.title }} - {{ n.url }}
</li>
</ul>
<pre>{{ $data | json }}</pre>
</div>
JavaScript: JavaScript的:
new Vue({
el: '#app',
data: {
news: [{
title: 'Test Title',
url: '/test-title'
}]
},
methods: {
addItem: function(e) {
e.preventDefault(); // prevent page refresh
this.news.push({
"title": this.itemTitle,
"url": this.itemUrl
});
this.itemTitle = this.itemUrl = '';
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.