更新v-模型更改值

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个文本输入v-model绑定它的值为data。我还希望能够在v-model值更改时调用我的parse()函数，以便更新也在data上的数组。更新v-模型更改值

<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这样做的方式？

回答：

一个依赖于另一个数据属性的适当的Vue方式是用computed property，每当userInput变化这样parsedInput自动更新：

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>

作为旁注：声明parse功能使用前，防止is not defined错误。

以上是 更新v-模型更改值 的全部内容， 来源链接： utcz.com/qa/263480.html

回到顶部