Question

我正在网站上使用Vue，并且有一个可以更改状态的工作按钮（如果按钮显示暂停并被单击，它将更改为表示恢复以及更改颜色）

此处的按钮功能可以在页面上完美地工作，但是我在使其与同一页面上的值对齐时遇到问题。我还有另一个函数，该函数具有一个名为details的对象，并且具有一个名为status的值，该值可以为“ H”或“ P”

我现在要做的就是解决此问题，以便在页面加载时，如果状态为“ H”，则按钮会显示“正在恢复”，如果状态为“ P”，则按钮会显示“暂停”（本质上，如果为“ H”，那么！ this.isOpen，如果为“ P”，则为this.isOpen）

如何更改页面加载的状态，以便如果状态为H，则this.isOpen为false，如果状态为P，则this.isOpen为true？我无法在数据返回中执行if / condition，但也许可以以某种方式使用计算属性？

<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

仅在isOpen或!isOpen生命周期方法中将mounted值分配给created时，才将其分配为{H}。

mounted(){
  if(this.details[0].status === 'H'){
    this.isOpen = !this.isOpen;
  }
},
pauseTask: function() {
      this.isOpen = !this.isOpen;

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

Answer 2

如果您的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>

对计算的Vue属性使用条件

2 个答案: