Vue JS push items to array?

Question

I would like to push the input to the array. When I press the button to add the items nothing happens. I've searched multiple websites but it seems that I am too dumb to find the right code :( Do anyone know whats the problem with the code:


<!DOCTYPE html>
  <head>
    <title>Clientseitige Webentwicklung mit Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app_basic">
        <ul>
            <li v-for="value in cars">{{ value }}</li>
        </ul>
        <input id="input1" type="text" v-model="newFarbe" placeholder="farbe">
        <input id="input2" type="text" v-model="newMarke" placeholder="marke">
        <input id="input3" type="text" v-model="newPS" placeholder="ps">
        <button v-on:click="addCar">Hinzufügen</button>
    </div>
    <script>
    var app_basic= new Vue(
        {
            el: '#app_basic',
            data: {
               cars:{
                farbe: 'Blau',
                marke: 'Ford',
                ps: '240'
               }
            
            },
            methods:{
                addCar: function() {
               this.cars.push({farbe : this.newFarbe, marke : this.newMarke, ps : this.newPS});
               this.newFarbe=''; 
               this.newMarke=''; 
               this.newPS=''; 
                }
            }
        });
</script>

  </body>
</html>

There are two problems with your code: a) cars is not an array so it doesn't have a .push method. b) newFarbe, newMarke and newPs are not defined in data, therefore not reactive, therefore not linked to your model (in other words, they are always undefined in your component's model - vue is not informed about their changes). The answer provided fixes both, although it doesn't call each one out individually. — tao
– tao, Commented Dec 6, 2020 at 15:05
Another minor improvement would be naming. There's no point in prefixing all props with new. Here's what I'm talking about: jsfiddle.net/websiter/v2wrmbc8. You also don't need ids on inputs (you don't have labels to target them, so...) — tao
– tao, Commented Dec 6, 2020 at 15:26

tao · Accepted Answer · 2020-12-06 15:02:04Z

cars should be an array and the inputs models should be defined in data. Moreover, it's better to have some sort of validation before the insertion:

new Vue({
  el: '#app_basic',
  data: {
    cars: [
      {
        farbe: 'Blau',
        marke: 'Ford',
        ps: '240'
      }
    ],
    newFarbe: '',
    newMarke: '',
    newPS: ''
  },
  methods:{
    addCar: function() {
      if(!this.newFarbe || !this.newMarke || this.newPS) return;
      this.cars.push({
        farbe : this.newFarbe, marke : this.newMarke, ps : this.newPS
      });
      this.newFarbe=''; 
      this.newMarke=''; 
      this.newPS=''; 
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app_basic">
  <ul>
    <li v-for="value in cars">
      {{ value.farbe }} -
      {{ value.marke }} -
      {{ value.ps }}
    </li>
  </ul>
  <input id="input1" type="text" v-model="newFarbe" placeholder="farbe">
  <input id="input2" type="text" v-model="newMarke" placeholder="marke">
  <input id="input3" type="text" v-model="newPS" placeholder="ps">
  <button v-on:click="addCar">Hinzufügen</button>
</div>

Collectives™ on Stack Overflow

Vue JS push items to array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related