v-model 및 데이터베이스 바인딩 없이 입력에 값 할당

v-model 및 데이터베이스 바인딩 없이 입력에 값 할당

v-for에서 일부 입력 필드를 개체에 바인딩하지 않고 일부 텍스트로 초기화해야 합니다.현재 시도 중입니다.

<div v-for="item in allItems">
  <input type="text" class="header-title" value="item.name"></input>
</div>

단, item.name은 아이템명이 아닌 입력으로 출력됩니다.어떻게 하면 좋을까요?

v-model통사당일 뿐이다:value이벤트, 보통@input여기서 문서를 참조해 주세요.

noop 함수를 전달할 수 있습니다.() => {}값 업데이트를 취소하거나 새 값으로 원하는 작업을 수행하려면 값을 다른 개체에 할당할 수 있습니다.

주의:<input>요소는 무효이며 닫힘 태그가 필요하지 않습니다.

new Vue({
  el: '#app',

  data() {
    return {
      allItems: [{ name: 'foo' },{ name: 'bar' }]
    }
  },
})

<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<div id="app">
  <div v-for="item in allItems">
    <input type="text" class="header-title" :value="item.name" @input="() => {}">
    {{ item.name }}
  </div>
</div>

입력값의 표시값:item.value를 사용하는 것만으로ref기여하다.

추가만 하면 됩니다.ref=''이 값을 마운트된 함수 내부의 입력 값에 매핑합니다.

new Vue({
  el: '#app',

  data () {
    return {
      allItems: [
        {name: 'foo'},
        {name: 'bar'}
      ]
    }
  },

  mounted () {
    let self = this; 
    this.$refs.inp.map( (m, k) => {
      m.value = self.allItems[k].name
    })
  }
})

<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<div id="app">
  <div v-for="item in allItems">
    <input type="text" class="header-title" value="item.name" ref='inp'></input>
  </div>
</div>

언급URL : https://stackoverflow.com/questions/49133151/assign-value-to-input-without-v-model-and-without-databinding