javascript - Vue 状态更改应用于之前的焦点上下文

Question

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

我的表单是这样构建的:

<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>

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

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

也许我现在忽略了一些非常明显的事情，或者朝着完全错误的方向前进，但我已经在这上面花了更多的时间，然后我实际上应该告诉我，我有点迷失了atm。

Answer 1

我相信，如果您将 activePage 作为 Prop 从 Form.vue 传递到 Pagination.vue 中，然后设置一个观察者该值发生变化时，您可以让 pagination-ctrl 的每个实例在变化时动态运行 defineButtonVisibility。

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