javascript - Vue.js v-model data object - Stack Overflow

admin管理员组

文章数量:1333450

So I just started playing around with 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..

/

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'}
    ]
  }
});

So I just started playing around with 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..

http://jsfiddle/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'}
    ]
  }
});

• javascript
• arrays
• vue.js

Share Improve this question Follow edited Mar 27, 2019 at 19:22 Iurii Tkachenko 3,1993030 silver badges3636 bronze badges asked Dec 6, 2015 at 20:21 VerbaVerba 38822 gold badges66 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You need a separate method to add items to news array. I added super simple variant of such function.

http://jsfiddle/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 = '';
    }
  }
});

本文标签： javascriptVuejs vmodel data objectStack Overflow