web-dev-qa-db-ja.com

Vuejs：複数入力のvモデル配列

Vモデルが添付された入力テキストフィールドがあり、誰かが「追加」ボタンを押すたびに、同じVモデルが添付された別の入力テキストがDOMに追加されます。次に、v-model値の配列を取得すると思っていましたが、最初のv-model入力の値のみを取得します。

<div id="app">
  <div id="references">
    <input v-model="references" type="text">
  </div>
  <button @click="addReference">Add</button>
</div>

Domに追加するhtmlは、addReferenceメソッドによってトリガーされます。

addReference: function(e) {
  e.preventDefault();
  console.log(this.references);
  var inputEl = '<input v-model="references" type="text">';
  $('#references').append(inputEl);
}

これはVuejsができないことですか？ Vuejsで動的dom要素から値を収集する別のアプローチはありますか？

new Vue({
  el: "#app",
  data: {
    references: "text"
  },
  methods: {
    addReference: function(e) {
      e.preventDefault();
      console.log(this.references);
      var inputEl = '<input v-model="references" type="text">';
      $('#references').append(inputEl);
    }
  }
})
input {
  display: block;
  margin: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
  <div id="references">
    <input v-model="references" type="text">
  </div>
  <button @click="addReference">Add</button>
</div>
arraysvue.js
36
Jan Vansteenlandt

あなたはあまりにもDOMを考えている、それは破壊するのは地獄の習慣のように難しいです。 Vueは、まずデータにアプローチすることをお勧めします。

正確な状況を伝えるのは難しいですが、おそらくv-forを使用し、findsの配列を作成して、必要に応じてプッシュします。

インスタンスを設定する方法は次のとおりです。

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

そして、テンプレートをセットアップする方法は次のとおりです。

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

ただし、indexにはkey以外のものを使用しようとします。

上記のデモは次のとおりです。 https://jsfiddle.net/crswll/24txy506/9/

59
Bill Criswell

Vue2でそれを行う方法を尋ねていて、それを挿入および削除するオプションを作成している場合は、 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/[email protected]/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>
15
Yevgeniy Afanasyev

以下は上記のデモです： https://jsfiddle.net/sajadweb/mjnyLm0q/11

new Vue({
  el: '#app',
  data: {
    users: [{ name: 'sajadweb',email:'[email protected]' }] 
  },
  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>
5
sajad