Vue.js v-model数据对象
Vue.js v-model data object
所以我刚开始玩Vue.js。但我在简单的任务中遇到了一些问题,比如向数组中添加新的"新闻项"。包括JSFiddle,所以如果有人能告诉我我做错了什么。。
http://jsfiddle.net/pL5taqp6/
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-
new Vue({
el: '#app',
data: {
news: [
{ title: 'Test Title', url: '/test-title'}
]
}
});
您需要一个单独的方法来向news
数组添加项。我添加了这种函数的超简单变体。
http://jsfiddle.net/00953sor/
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:
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 = '';
}
}
});
相关文章:
- 将嵌套对象数据添加到窗体中
- 使用javascript更改嵌套对象数据
- 如何将状态对象/数据传递给(异步)ajax 回调
- 如何使用HTML5中的sessionStorage概念在Javascript中打印对象数据
- 如何在express中使用socket.io发布多个对象数据
- 如何在 Javascript 中将函数绑定到对象数据成员的更改
- 在$.ajax调用中将附加数据添加到jQuery包装的对象数据中
- 当点击处理程序添加到谷歌地图圆圈标记时,无法访问对象数据
- JavaScript对象数据和数组
- 访问主数组内的数组中的对象数据
- 角度.js从NG重复更新对象数据
- HTML 对象数据文件(如果未找到)
- 设置对象数据结构数组属性
- Ajax 请求不发送我的对象数据
- 获取对象数据的浅拷贝的最快方法是什么
- 如何访问对象的键值?希望从对象数据填充表
- JSON.parse 似乎不解析对象数据
- 在 android WebView 中的 java 和 javascript 之间共享对象(数据)
- 选择 JSON 对象数据表元素以列出其所有元素
- 当响应 JSON 对象数据计数为零时,AJAX 成功回调函数重定向到错误回调