Vuejs: macierz v-mode na wielu wejściach

Question

Jestem zdumiony tym, co vuejs przynosi do stołu, ale uderzam w ścianę w następujący sposób. Mam wejściowe pole tekstowe z dołączonym modelem v, a za każdym razem, gdy ktoś kliknie przycisk "dodaj", inny tekst wejściowy zostanie dodany do DOM z tym samym dołączonym modelem v. I myślałem, że wtedy uzyskać tablicę wartości v-modeli, ale tylko pobiera wartość pierwszego wejścia v-model:

<label class="col-sm-2" for="reference">Referenties</label> 
<div class="col-sm-6"> 
    <input v-model="find.references" class="form-control" type="text"> 
</div> 
<div class="col-sm-2"> 
<button @click="addReference" class="form-control"><span class="glyphicon glyphicon-plus"></span>Add</button>       

HTML I dołączyć do Domu jest wyzwalany metodą addReference:

addReference : function (e) { 
      e.preventDefault(); 

      console.log(this.find.references); 

      div = '<div class="col-sm-6 col-md-offset-2 reference-row"><input v-model="find.references" class="form-control" type="text"></div>'; 

      $('#references').append(div); 
     } 

Czy jest to coś, czego Vuejs nie może zrobić? Czy istnieje inne podejście do zbierania wartości z dynamicznych elementów dom z Vuejs?

Answer 1

Myślisz też, DOM, trudno się złamać. Vue zaleca, abyś najpierw podszedł do danych.

Ciężko powiedzieć w tej konkretnej sytuacji, ale prawdopodobnie użyłbym v-for i utworzyłem tablicę z numerem finds, aby ją wypchnąć, ponieważ potrzebuję więcej.

Oto jak bym skonfigurować instancję:

new Vue({ 
    el: '#app', 
    data: { 
    finds: [] 
    }, 
    methods: { 
    addFind: function() { 
     this.finds.push({ value: '' }); 
    } 
    } 
}); 

A oto jak ja skonfigurować szablon:

<div id="app"> 
    <h1>Finds</h1> 
    <div v-for="find in finds"> 
    <input v-model="find.value"> 
    </div> 
    <button @click="addFind"> 
    New Find 
    </button> 
</div> 

Oto demo z powyższym: https://jsfiddle.net/a5t24gm3/1/

Answer 2

Jeśli pytasz, jak to zrobić w Vue2 i możesz je wstawić i usunąć, proszę spojrzeć na: js fiddle

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    finds: [] 
 
    }, 
 
    methods: { 
 
    addFind: function() { 
 
     this.finds.push({ value: 'def' }); 
 
    }, 
 
    deleteFind: function (index) { 
 
     console.log(index); 
 
     console.log(this.finds); 
 
     this.finds.splice(index, 1); 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script> 
 
<div id="app"> 
 
    <h1>Finds</h1> 
 
    <div v-for="(find, index) in finds"> 
 
    <input v-model="find.value"> 
 
    <button @click="deleteFind(index)"> 
 
     delete 
 
    </button> 
 
    </div> 
 
    
 
    <button @click="addFind"> 
 
    New Find 
 
    </button> 
 
    
 
    <pre>{{ $data }}</pre> 
 
</div>

Answer 3

Oto demo z powyższym: https://jsfiddle.net/sajadweb/mjnyLm0q/11

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    users: [{ name: 'sajadweb',email:'sajadweb@outlook.com' }] 
 
    }, 
 
    methods: { 
 
    addUser: function() { 
 
     this.users.push({ name: '',email:'' }); 
 
    }, 
 
    deleteUser: function (index) { 
 
     console.log(index); 
 
     console.log(this.finds); 
 
     this.users.splice(index, 1); 
 
     if(index===0) 
 
     this.addUser() 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="app"> 
 
    <h1>Add user</h1> 
 
    <div v-for="(user, index) in users"> 
 
    <input v-model="user.name"> 
 
    <input v-model="user.email"> 
 
    <button @click="deleteUser(index)"> 
 
     delete 
 
    </button> 
 
    </div> 
 
    
 
    <button @click="addUser"> 
 
    New User 
 
    </button> 
 
    
 
    <pre>{{ $data }}</pre> 
 
</div>