Vue 状态更改应用于以前的焦点上下文

Question

所以我正在以我使用 Vue 制作的形式进行字段集分页。我现在遇到的分页问题是分页控件可见性的状态更改应用于上一个fieldset，而不是当前。

我的表单构造如下：

<template>
<form>
<fieldset id="one" v-show="activePage == 'one'">
<input />
<pagination-ctrl @paginate="paginate" />
</fieldset>
<fieldset id="two" v-show="activePage == 'two'">
<input />
<pagination-ctrl @paginate="paginate" />
</fieldset>
<fieldset id="three" v-show="activePage == 'three'">
<input />
<pagination-ctrl @paginate="paginate" />
</fieldset>
</form>
</template>
<script lang="coffee">
import Pagination from '@/components/Pagination.vue'
import FormInput from '@/components/FormInput.vue'
export default
name: 'Form'
data: ->
activePage: 'one'
components:
'pagination-ctrl': Pagination
'input': FormInput
methods:
paginate: (data) ->
@activePage = data
</script>

Pagination.vue包含用于在活动fieldset之间切换的按钮，如下所示：

<template>
<div class="btn-group" role="button" v-on:click="paginate" ref="btn-group">
<button class="ui-button prev" rel="prev" :disabled="disablePrev">Previous</button>
<button class="ui-button next" rel="next" :disabled="disableNext">Next</button>
</div>
</template>
<script lang="coffee">
export default
name: 'FormControl'
data: ->
pages: null
disablePrev: true
disableNext: true
methods:
accumelatePages: ->
fieldsetNode = @$refs['btn-group'].parentNode
formNode = fieldsetNode.parentNode
# cast fieldsets to true array in favor of HTMLNodeCollection
@pages = Array.prototype.slice.call(formNode.getElementsByTagName('fieldset'))
determineButtonVisibility: (item) ->
currIndex = @pages.findIndex((node)->
node.getAttribute('id') is item
)
@disablePrev =
if currIndex > 0
false
else true
@disableNext =
if currIndex < (@pages.length - 1)
false
else true
paginate: (e) ->
e.preventDefault()
node = e.target
if node.getAttribute('rel') is 'next'
activeNode = node.parentNode.parentNode.nextElementSibling
if node.getAttribute('rel') is 'prev'
activeNode = node.parentNode.parentNode.previousElementSibling
if activeNode?
nodeId = activeNode.getAttribute('id')
@$emit('paginate', nodeId)
@determineButtonVisibility(nodeId)
mounted: ->
@accumelatePages()
@determineButtonVisibility(@pages[0].getAttribute('id'))
</script>

其思路是，当您单击按钮时，determineButtonVisibility()确定当前fieldset相对于周围字段集的位置，并相应地设置按钮的显示。然而，问题是这工作得很好，但这些显示状态应用于您刚刚导航离开的字段集。

因此，如果我单击字段集one中的下一步按钮，状态更改将应用于字段集one(旧上下文(而不是字段集two(新上下文(。

也许我现在忽略了一些非常明显的东西或朝着一个完全错误的方向前进，但我已经花了很多时间在这上面，然后我实际上应该笑我有点迷路了。

Answer 1

我相信，如果您将activePage作为道具从Form.vue传递到您的Pagination.vue中，然后在该值更改时设置一个观察程序，您可以让每个pagination-ctrl实例在更改时动态运行determineButtonVisibility。

<pagination-ctrl @paginate="paginate" :activePage="activePage" />