Vue按钮，基于数组值进行三向切换

Question

我有一个vue项目，我在页面加载时加载一个数组，查看每个行的项目，检查状态，并尝试通过三向切换显示每个状态的按钮。

我想我的主要思想是对的，但结构因安装而异，它是一个阵列。我对如何完全使用此功能有些困惑，但很简单，我只希望为状态中的每个subItem行显示一个按钮。如果subItem status ='A'，我想要一个按钮，上面显示接受，如果它是'B'，则暂停，如果它是'C'，则继续。我需要拨动开关才能工作，然后可以根据状态调用axios呼叫，但是我认为我只需要先进行此项工作就可以了。

subItems是这样的数组：

array(2)
    0:
        id: 123,
        status: 'A'
    1:
        id: 234,
        status: 'B'

这是我的模板/ Vue代码：

<div class="row" v-for="(subItem, key) in subItems" v-cloak>
    <button :class="['btn', 'btn-block', subItem.status == 'H' ? 'accept' : 'resume' : 'pause']" :style ="{ border:none, borderRadius: .15 }" v-on:click="pause(subItem)" type="button" role="button" id="" aria-expanded="false">
        {{ subItem.status == 'A' ? 'Accept' : 'Resume' : 'Pause' }}
    </button>
</div>



data() {
    return {
        subItems: [],
    }
},
mounted() {

    if(this.subItem.status === 'A'){
        this.isOpen = !this.isOpen;

        this.pauseButton.text = 'Accept';
        this.pauseButton.background ='blue';

    }else if(this.subItem.status === 'B'){
        this.isOpen = !this.isOpen;

        this.pauseButton.text = 'Pause';
        this.pauseButton.background ='#yellow';

    }else if(this.subItem.status === 'C'){
        this.isOpen = !this.isOpen;

        this.pauseButton.text = 'Resume';
        this.pauseButton.background ='#red';
    }
}

Answer 1

您可以使用计算属性来扩展数据对象上的属性，也可以通过已安装的方法来执行此操作。计算出的属性将是better，因为它会在数据对象发生更改时发生变化。

new Vue({
  el: '#app',
  computed: {
    formattedSubItems() {
      return this.subItems.map(si => {
        if (si.status === 'A') {
          return { ...si,
            text: 'Accept',
            class: 'accept'
          }

        } else if (si.status === 'B') {
          return { ...si,
            text: 'Pause',
            class: 'pause'
          }


        } else if (si.status === 'C') {
          return { ...si,
            text: 'Resume',
            class: 'resume'
          }

        }
      })
    }
  },
  data() {
    return {
      subItems: [{
          id: 123,
          status: 'A'
        },
        {
          id: 234,
          status: 'B'
        }
      ],
    }
  }
})

.accept {
  color: green
}

.pause {
  color: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="row" v-for="(subItem, key) in formattedSubItems" v-cloak>
    <button class="btn btn-block" :class="subItem.class" :style="{ border:none, borderRadius: .15 }" v-on:click="pause(subItem)" type="button" role="button" id="" aria-expanded="false">
        {{ subItem.text}}
    </button>
  </div>
</div>