我正在使用CMS创建一个前端表单，客户（剧院导演）可以定义几个放映时间。 我有一个按钮，他们根据需要点击“添加另一个”输入字段（旁注：我不知道如何使用Vue启用'删除最后一个'按钮，但这是另一天的另一个主题）。
我已经开始工作了。 但是现在，一旦导演创建了他们的放映时间并且他们回来编辑它们，我需要Vue计数器的起始索引是已经存在的字段数。 因此，如果他们已经定义了3个放映时间（0,1,2），则使用Vue动态放置的第一个字段应该以3开头。
或者，我想知道在页面加载时是否更容易在Vue中生成现有数据的数组，但我不知道我从哪个方法开始。
这是我的HTML和Vue JS：
new Vue({
el: '#app',
data: {
timeslots: [
{
count: 0
}
],
count: 0
},
methods: {
addAnother: function(){
this.timeslots.push({
count: ++this.count
});
}
}
});
<div id="app">
{{ performances }}
<input name="performances[{{ zero_index }}][showtime]" value="{{ showtime }}">
{{ /performances }}
<template v-for="slot in timeslots">
<input name="performances[@{{ slot.count }}][showtime]" value="{{ now }}">
</template>
<div>
<button @click.prevent="addAnother">Add another</button>
</div>
</div>
任何前进的帮助表示赞赏！
I'm using a CMS to create a front-end form where customers (theatre directors) can define several showtimes. I have a button they click to "add another" input field as needed (sidenote: I don't know how to enable a 'remove last' button using Vue, but that's another topic for another day).
I've gotten that working. But now, once a director has created their showtimes and they come back to edit them, I need the starting index of the Vue counter to be the number of fields that already exist. So if they've defined 3 showtimes already (0,1,2), the first field dynamically placed with Vue should start with 3.
Alternatively, I wonder if it'd be easier to generate an array of the existing data in Vue when the page loads, but I don't know where I'd start with that method.
Here's my HTML and Vue JS:
new Vue({
el: '#app',
data: {
timeslots: [
{
count: 0
}
],
count: 0
},
methods: {
addAnother: function(){
this.timeslots.push({
count: ++this.count
});
}
}
});
<div id="app">
{{ performances }}
<input name="performances[{{ zero_index }}][showtime]" value="{{ showtime }}">
{{ /performances }}
<template v-for="slot in timeslots">
<input name="performances[@{{ slot.count }}][showtime]" value="{{ now }}">
</template>
<div>
<button @click.prevent="addAnother">Add another</button>
</div>
</div>
Any help to move forward is appreciated!
最满意答案
我使用我在OP中推测的第二种方法，使用$index而不是像count这样的任意整数，在比预期更短的时间内解决了这个问题。 此方法需要将JS直接放在我的模板中，而不是放在单独的文件中。 但那对我没问题。
<div id="oven">
<template v-for="biscuit in oven">
<div>
<input type="text" name="performances[@{{ $index }}][showtime]" value="@{{ biscuit.showtime }}">
</div>
</template>
<span class="add small black btn" @click="addAnother"><i class="fa fa-plus-circle"></i> Add another</span>
</div>
<script>
new Vue({
el: '#oven',
data: {
oven: [
{{ performances }}
{
showtime: "{{ showtime }}"
},
{{ /performances }}
]
},
methods: {
addAnother: function(){
this.oven.push({
showtime: '{{ now modify_date="+2 months" format="Y-m-d" }} 7:30 PM'
});
}
}
});
</script>
I solved it myself in shorter time than expected using the 2nd method I speculated about in my OP, and using $index instead of an arbitrary integer like count. This method requires the JS to be put directly in my template though, not in a separate file. But that's fine by me.
<div id="oven">
<template v-for="biscuit in oven">
<div>
<input type="text" name="performances[@{{ $index }}][showtime]" value="@{{ biscuit.showtime }}">
</div>
</template>
<span class="add small black btn" @click="addAnother"><i class="fa fa-plus-circle"></i> Add another</span>
</div>
<script>
new Vue({
el: '#oven',
data: {
oven: [
{{ performances }}
{
showtime: "{{ showtime }}"
},
{{ /performances }}
]
},
methods: {
addAnother: function(){
this.oven.push({
showtime: '{{ now modify_date="+2 months" format="Y-m-d" }} 7:30 PM'
});
}
}
});
</script>
更多推荐
发布评论