v-for 루프 내에서 v-model 사용

v-for 루프 내에서 v-model 사용

v-for 루프 내에서 입력 필드를 렌더링하고 해당 입력에 v-model을 사용하여 입력 값을 가져오지만 입력 중 하나를 입력하면 모든 텍스트 필드에 값이 입력됩니다.

이 바이올린으로 내 문제를 재현했다.

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="text" v-model="score">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

new Vue({
  el: "#app",
  data: {
    score: [],
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
})

네, X 입력 필드를 1개의 값으로 바인드하기 때문에 발생합니다.아마 원하는 것은, 그 사용을 위해서, 어레이로서 스코어[]를 기입하는 것입니다.

new Vue({
  el: "#app",
  data: {
    score: [],
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="(todo,index) in todos">
      <label>
    <input type="text" v-model="score[index]">

    <del v-if="todo.done">
      {{ todo.text }}
    </del>
    <span v-else>
      {{ todo.text }}
    </span>
  </label>
    </li>
  </ol>
</div>

https://jsfiddle.net/o9awn47v/

v-model="score"에서 사용되는 경우 점수는 단일 변수로 취급됩니다.

각 작업 항목의 점수 값을 쉽게 참조할 수 있도록 작업 항목에 점수를 추가하고 입력에서 v-모델링할 수 있습니다.

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="text" v-model="todo.score">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false, score: '' },
      { text: "Learn Vue", done: false, score: '' },
      { text: "Play around in JSFiddle", done: true, score: '' },
      { text: "Build something awesome", done: true, score: '' }
    ]
  },
})

각 테이블 필드(양식 입력)에 대해 formdData를 입력해야 하는데 v-for를 사용하여 모든 테이블 질문을 렌더링하는 유사한 문제가 발생했습니다.위의 솔루션을 확인해 보았지만, 나에게는 효과가 없었습니다.

<div class="option-section" v-if="question.type === 'TABLE'">
<table class="table b-table table-bordered">
 <thead>
   <tr>
   <th v-for="(column, index) in question.columns" :key="index">
    {{column.body}}
    </th>
    </tr>
  </thead>
 <tbody>
  <tr>
 <td v-for="(column, colindex) in question.columns" :key="colindex">
 <b-form-input size="sm" id="colindex" autocomplete="off"
 class="readonly" readonly disabled></b-form-input>
 </td>
 </tr>
 </tbody>
 </table> 
</div>

마침내 나는 그것을 어떻게 해야 할지 알게 되었고, 누군가 비슷한 상황에 처했을 때 공유해야 한다는 것을 알고 싶다.

<div class="option-section" v-if="question.type === 'TABLE'">
  <table class="table b-table table-bordered">
    <thead>
     <tr>
     <th v-for="(column, index) in question.columns" :key="index">
     {{column.body}}
     </th>
   </tr>
 </thead>
  <tbody>
   <tr>
   <td v-for="(column, colindex) in question.columns" :key="colindex">
    <b-form-input v-model="question.columns[colindex].response" id="colindex" :disabled="readOnly" size="sm" autocomplete="off" class="readonly" >
 </b-form-input>
 </td>
 </tr>
  </tbody>
   </table>
</div>

동적인 솔루션을 찾고 계신 분들을 위해 저와 제 동료를 찾아낸 더 나은 솔루션이 있습니다.원하는 것이 아닐 수도 있지만, 더 정교해지고 두 번째 루프를 사용해야 하는 경우에 대비한 흥미로운 통찰력입니다.

  <div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="(todo,index) in todos">
      <label>
      <div v-for="(val, index2) in todo.quantity" :key="index2">
    <input type="text" v-model="score[index][index2]">
    </div>


    <del v-if="todo.done">
      {{ todo.text }}
    </del>
    <span v-else>
      {{ todo.text }}
    </span>
  </label>
    </li>
  </ol>
  <p>
   {{ scoreVal }}
  </p>
</div>



new Vue({
  el: "#app",
  mounted() {
  this.todos.forEach(item => {

  var a = [];
  var b = item.quantity;


  for(var i=0 ; i<b ;i++)
  {
  a.push("");
  }

  this.score.push(a);

  })
  },
  computed: {
  scoreVal() {
  return this.score;
  },


  },
  data: {
    score: [],
    todos: [
      { text: "Learn JavaScript", done: false, quantity: 3},
      { text: "Learn JavaScript", done: false, quantity: 4},
      { text: "Learn Vue", done: false, quantity: 4 },
    ]
  },
})

https://jsfiddle.net/litusername/ekyftmjo/2/

매우 심플한 솔루션.

HTML을 심플하게 만들고 싶었고 이것이 매력적으로 작용했다.

<template>
    <div id="app">
        <select
            v-for="key in Object.keys(filters)"
            :key="key"
            v-model="selections[key]"
        >
            <option
                v-for="(option, $option) in filters[key]"
                :key="$option"
                :value="option.value"
            >
                {{ option.name }}
            </option>
        </select>
        <pre>{{ selections }}</pre>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selections: {},
            filters: {
                suppliers: [
                    { name: "Supplier One", value: 1 },
                    { name: "Supplier two", value: 2 },
                    { name: "Supplier three", value: 3 }
                ],
                requester: [
                    { name: "Requester One", value: 1 },
                    { name: "Requester two", value: 2 },
                    { name: "Requester Three", value: 2 }
                ],
                statuses: [
                    { name: "Fair", value: 1 },
                    { name: "Unfair", value: 2 }
                ]
            }
        };
    }
};
</script>

언급URL : https://stackoverflow.com/questions/52530434/use-v-model-inside-a-v-for-loop