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（新上下文）。 / p>

也许我现在正在忽略一些确实很明显的东西，或者正朝着完全错误的方向前进，但是我已经花了更多时间在这上面，所以我实际上应该避免我迷失了atm。

Answer 1

我相信，如果您将activePage作为道具从Form.vue传递到您的Pagination.vue，然后设置值的观察者，则您可以拥有{{1 }}在更改时动态运行pagination-ctrl。

determineButtonVisibility

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

1 个答案: