gpt4 book ai didi

javascript - 当 v-model 改变时更新一个值

转载 作者:行者123 更新时间:2023-11-30 14:52:49 25 4
gpt4 key购买 nike

我有一个带有 v-model 的文本输入,将它的值绑定(bind)到 data。我还希望能够在 v-model 值更改时调用我的 parse() 函数,以便更新也在 data< 上的数组.

<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-model 更改将 data.parsedInput 更新为 parse() 函数?执行此操作的正确 Vue 方法是什么?

最佳答案

依赖于另一个数据属性的正确 Vue 方式是使用 computed property , 这样 parsedInput 就会在 userInput 改变时自动更新:

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 函数,以防止未定义 错误。

关于javascript - 当 v-model 改变时更新一个值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47868954/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com