Ruby on rails Vue.js-设置多步骤表单的基础

我正在尝试使用Vue.js为我的Rails 5应用程序制作一个简单的多步骤表单。这是我第一次使用Vue，所以我对如何使事情正常工作有点困惑

现在，我正努力做到以下几点：

单击下一步按钮，将步骤1到步骤N中的

li

元素设置为类

处于活动状态

单击上一个按钮并从步骤N中删除类

活动

很简单。以下是我目前掌握的情况，但我不知道接下来该怎么办：

import Vue from 'vue/dist/vue.esm'

document.addEventListener('DOMContentLoaded', () => {
  Vue.component('step-item', {
    props: ['step'],
    template: '<li :class="{active: isActive}">{{ step.text }}</li>',
    data: function() {
      return {
        isActive: true // Right now I set them all to true
      }
    }
  })

  Vue.component('step-button', {
    props: ['name'],
    template: "<input :name='name' :value='name' @click='counter += 1' type='button' class='btn btn-secondary' />"
  })

  const progress = new Vue({
    el: '#vue-listing',
    data: {
      counter: 0,
      stepList: [
        {id: 0, text: 'Basics'},
        {id: 1, text: 'Location'},
        {id: 2, text: 'Images'},
        {id: 3, text: 'Other'}
      ]
    },
    methods: {
      addProgress: function() {return true}, // todo
      delProgress: function() {return true}  // todo
    }
  })
})

从“Vue/dist/Vue.esm”导入Vue
document.addEventListener（'DOMContentLoaded'，（）=>{
Vue.组件（“步骤项”{
道具：['step']，
模板：“{{step.text}”，
数据：函数（）{
返回{
isActive:true//现在我将它们都设置为true
}
}
})
Vue.组件（“步进按钮”{
道具：['name']，
模板：“”
})
const progress=新的Vue({
el:“#vue列表”，
数据：{
柜台:0,，
步骤列表：[
{id:0，文本：'Basics'}，
{id:1，文本：'Location'}，
{id:2，文本：'Images'}，
{id:3，文本：'Other'}
]
},
方法：{
addProgress:function（）{return true}，//todo
delProgress:function（）{return true}//todo
}
})
})

然后我有我的表格

<div id="vue-listing">
  <!-- Display the progress through the form -->
  <ul class="text-center" id="listing-progressbar">
    <step-item v-for="item in stepList" :step="item" :key="item.id"></step-item>
  </ul>

  <fieldset>
    Step 1
    <step-button name="Next"></step-button>
  </fieldset>

  <fieldset>
    Step 2
    <step-button name="Previous"></step-button>
    <step-button name="Next"></step-button>
  </fieldset>

</div>

第一步
步骤2

现在，我被困在如何让下一个和上一个按钮添加或删除当前步骤的活动。 最后，我还需要根据步骤隐藏和显示

元素

非常感谢您的帮助

---

谢谢

这个想法的一个简单实现可能是这样的

console.clear（）
document.addEventListener（'DOMContentLoaded'，（）=>{
Vue.组件（“步骤项”{
道具：['step'，'active']，
模板：'{{step.text}}，
})
const progress=新的Vue({
el:“#vue列表”，
数据：{
活动步骤：0，
步骤列表：[
{id:0，文本：'Basics'}，
{id:1，文本：'Location'}，
{id:2，文本：'Images'}，
{id:3，文本：'Other'}
]
},
方法：{
addProgress:function（）{return true}，//todo
delProgress:function（）{return true}，//todo
},
})
})

.active{
颜色：蓝色
}

第一步
步骤2
步骤3
步骤4

上
下一个