2017-12-18 6 views
0

텍스트 입력이 v-model이고 텍스트 입력 값이 data입니다. 또한 배열 data에 업데이트하려면이 v-model 값이 변경되면 내 parse() 함수를 호출 할 수 있기를 바랍니다.v-model 변경시 값 업데이트

<div id="app"> 
    <input 
     id="user-input" 
     type="text" 
     v-model="userInput"> 

    <ul id="parsed-list"> 
     <li v-for="item in parsedInput"> 
      {{ item }} 
     </li> 
    </ul> 
</div> 

new Vue({ 
    el: '#app', 
    data: { 
    userInput: '', 
    parsedInput: [] 
    } 
}) 

let parse = input => { 
    return input.split(',') 
} 
나는 V 모델 변경을 사용하여 parse() 기능 data.parsedInput 업데이트에 대한 이동하는 방법

? 이 작업을 수행하는 적절한 Vue 방법은 무엇입니까? (!) 참고로

let parse = input => { 
 
    return input.split(',') 
 
} 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    userInput: '', 
 
    }, 
 
    computed: { 
 
    parsedInput() { 
 
     return parse(this.userInput) 
 
    } 
 
    } 
 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script> 
 
<body> 
 
    <div id="app"> 
 
    <input id="user-input" type="text" v-model="userInput"> 
 

 
    <ul id="parsed-list"> 
 
     <li v-for="item in parsedInput"> 
 
     {{ item }} 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body>

: 다음 선언

답변

1

서로에 따라 데이터 속성의 적절한 뷰 방식은 userInput 변경 될 때마다 그 방법 parsedInput을 자동으로 업데이트하는 computed property 함께 is not defined 오류를 방지하기 위해 사용하기 전에 parse 기능을 사용하십시오.