javascript - 对计算的 Vue 属性使用条件

Question

我在一个站点中使用 Vue，我有一个可以改变状态的工作按钮(如果按钮显示暂停并被点击，它会变为恢复，并改变颜色)

此处的按钮功能在页面上运行良好，但我遇到了问题，无法使其与同一页面上的值对齐。我有另一个函数，它有一个名为 details 的对象，它有一个名为 status 的值，可以是“H”或“P”

我现在需要做的就是解决这个问题，以便在页面加载时，如果状态为“H”，则按钮显示“继续”，如果状态为“P”，则按钮显示暂停(本质上，如果为“H”，则! this.isOpen，如果是“P”则 this.isOpen)

如何为页面加载更改它，以便如果状态为 H this.isOpen 为假，如果状态为 P this.isOpen 为真？我不能在数据返回中执行 if/conditional，但也许我可以以某种方式使用计算属性？

<button class="btn btn-block" :style ="{ color: pauseButton.textColor, backgroundColor:pauseButton.background, border:none, borderRadius: .15 }" v-on:click="pauseTask" type="button" role="button" id="" aria-expanded="false">
  {{ pauseButton.text }}
</button>

data() {
    return {
        details: [],
        pauseButton: {
            text:'Pause',
            textColor: '#6c757d',
            background: '#BDE5F8'
        },
        isOpen: true,
    }
},
pauseTask: function() {
      this.isOpen = !this.isOpen;

      //this is the new line that doesn't work the way I need
      if(this.details[0].status === 'H'){
        !this.isOpen;
      }

      this.pauseButton.text = this.isOpen ? 'Pause' : 'Resume';
      this.pauseButton.background = this.isOpen ? '#BDE5F8' : '#FEEFB3';
      this.pauseButton.textColor = this.isOpen ? '#6c757d' : '#ff6e6e ';
    },

Answer 1

如果您的 details 是一个数组，并且您要循环它来创建多个元素，您应该按照下面的方法来简化它。

new Vue({
  el: '#app',
  data() {
    return {
      details: [{
        status: 'H'
      }, {
        status: 'H'
      }, {
        status: 'P'
      }]
    }
  },
  methods: {
    toggleTask(d) {
      d.status = (d.status == 'H' ? 'P' : 'H')
    }
  }
});

.btn {
  border: none;
  border-radius: .15;
  margin: 4px 0;
  padding: 4px 10px;
}

.btn.resume {
  color: #ff6e6e;
  background-color: #FEEFB3;
}

.btn.pause {
  color: #6c757d;
  background-color: #BDE5F8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-for="(d, i) in details" :key="i">
    Status: {{ d.status}}
    <button 
      :class="['btn', 'btn-block', d.status == 'H' ? 'resume' : 'pause']" 
      @click="toggleTask(d)" 
      role="button" 
      aria-expanded="false">
      {{ d.status == 'H' ? 'Resume' : 'Pause' }}
    </button>
  </div>
</div>