在我的JavaScript中,我有:
data: {
rooms: [
{type: 'single'},
{type: 'double'}
...
],
selectedSingle: 0,
selectedDouble: 0,
...
},
computed: {
capitalize: function(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
在HTML中,我有:
<li v-for="(room, index) in rooms">
<input type="number" v-model="'selected' + capitalize(room.type)">
</li>
问题是我找不到以这种方式访问我的模型的方法,我现在看到的唯一方法是销毁v-for
并手动制作,但这不是最好的解决方案,因为我有很多"房间"。欢迎任何想法。
您正在尝试通过字符串访问data
属性。为此,您可以使用对象访问属性表示法(obj['propname']
(使用$data
作为对象:
<input type="number" v-model="$data['selected' + capitalize(room.type)]">
另外,您的计算实际上应该是一个方法:
methods: { // changed from computed to method
capitalize: function(string) {
演示:
new Vue({
el: '#app',
data: {
rooms: [
{type: 'single'},
{type: 'double'}
],
selectedSingle: 111,
selectedDouble: 222,
},
methods: { // changed from computed to method
capitalize: function(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<ul>
<li v-for="(room, index) in rooms">
<input type="number" v-model="$data['selected' + capitalize(room.type)]">
</li>
</ul>
</div>
对于使用 Vue 3 的人,请使用 this
而不是 $data
。
例如:
import { reactive, createApp } from 'vue';
createApp({
setup() {
const state = reactive({
propertyA: 'valueA',
propertyB: 'valueB',
});
return state;
};
});
<input v-for="p in ['propertyA', 'propertyB']" v-model="this[p]">