Vue.js v-model 数据对象

Posted 2023-02-22

【中文标题】Vue.js v-model 数据对象

【英文标题】：Vue.js v-model data object

【发布时间】：2016-03-11 09:18:28

【问题描述】：

所以我刚刚开始使用 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'
    ]
  
);

【参考方案1】：

您需要一个单独的方法来将项目添加到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 = '';
    
  
);

【讨论】：

如果您在表单标签上使用@submit.prevent，则不需要e.preventDefault(); 方法中的e.preventDefault(); 行。