如何创建一个收藏夹列表与Vue的JS。允许用户选择最多5个选项

问题描述 投票:0回答:2

首先,我是新来的节目和新的这个渠道,所以我很抱歉,如果我的问题的结构是不正确的。如果需要,我可以提供更多的细节。在此先感谢您的帮助。

上下文:我有多个选项(按钮)的图,其中用户可以选择多达其中5。一旦用户选择第五个按钮所有其他按钮应该得到禁止。如果用户再次点击选择按钮中的一个,其他所有的按钮应该得到重新启用。我怎样才能实现这个逻辑是什么?

我使用VUE js和vuetify。

这可能不是最好的解决办法,但有一次我在一个按钮,用户点击我改变类按钮的,所以它看起来好像它是积极的。然后,我计算已被点击禁用按钮的按键剩下的量(这是不工作)。

 <v-layout>
      <v-flex row wrap>
        <v-card class="interests__content">
          <!-- looping through interests array -->
          <!-- with :class i'm binding classes to change the color of the buttons, with @click="increase()" i'm calling the increase method -->
          <v-tooltip color="primary" top v-for="interest in interests" :key="interest.name">
            <v-btn
              v-model="selected"
              flat
              slot="activator"
              :class="{blue:interest.checked, interest__btn: !interest.checked}"
              @click="increase(interest)"
              :disabled="disabled"
              :checked="checked"
            >{{interest.name}}</v-btn>

            <span>{{interest.name}}</span>
          </v-tooltip>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>


<script>
export default {
  data() {
    return {
      checked: false,
      selected: "",
      count: 0,
      disabled: false,
      interests: [
        { name: "Interest1", checked: false },
        { name: "Interest2", checked: false },
        { name: "Interest3", checked: false },
        { name: "Interest4", checked: false },
        { name: "Interest5", checked: false },
        { name: "Interest6", checked: false },
        { name: "Interest7", checked: false },
        { name: "Interest8", checked: false },
        { name: "Interest9", checked: false },


      ]
    };
  },
  methods: {
    increase: function(interest) {
      this.count += 1;
      //changing the value of checked to add the blue class, with this class I add the background color to the button as if it was active.
      interest.checked = !interest.checked;

      if (this.count > 4) {
        this.disabled = !this.disabled;
      }
    },
    // I'm trying to check if the button has a class to implement the logic
    checkIfClass: function(interest) {
      interest.checked = !interest.checked;

      if (interest.classList.contains("blue"));
    }
  },
  computed: {}
};
</script>
<style scoped>
.interest__btn {
  font-family: Arial;
  font-size: 1em;
  background: white;
  color: #333333;
  border: 1px solid #0091da;
  text-transform: none;
}
.interest__btn:hover {
  color: black;
  background-color: rgba(172, 196, 221, 0.7);
}
.interests__content {
  padding: 1.7em;
}
.blue {
  background-color: #0091da;
  color: white !important;
  text-transform: none;
}
</style>
javascript vue.js vuejs2 vuetify.js
2个回答
0
投票

这样做的Vue的方法是让你的JS应用程序(你interests阵列)的所有状态,然后做出处理这一状态的反应性而显示的一切。在实践中,这意味着使用computed而不是methods了,把国家变成屏幕上的像素的一切。

在大过去,我们会通过interests循环计数检查的数量。在2019年,我们将使用减少(),所以...

computed:{
    numChecked(){
        return this.interests.reduce((acc,curr)=>acc += curr.checked?1:0,0)
    }
}

然后在你的模板?

:disabled="(numChecked > 5 && !interest.checked)?'disabled':''"

0
投票

我终于想出了一个解决方案,基本上都采用观察者知道当计数器是大于5并添加另一个值对处理禁用属性:`

{{interest.那么}}

            <span>{{interest.name}}</span>
          </v-tooltip>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      selected: "",
      count: 0,
      disabled: false,
      interests: [
          { name: "Interest1", checked: false, disabled: false },
          { name: "Interest2", checked: false, disabled: false },
          { name: "Interest3", checked: false, disabled: false },
          { name: "Interest4", checked: false, disabled: false },
          { name: "Interest5", checked: false, disabled: false },
          { name: "Interest6", checked: false, disabled: false },
          { name: "Interest7", checked: false, disabled: false },

      ]
    };
  },
  methods: {
    increase: function(interest) {
      //changing the value of checked to add the blue class, with this class I add 
      the background color to the button as if it was active.
      interest.checked = !interest.checked;

      if (interest.checked) {
        this.count++;
      } else {
        this.count--;``
      }
    }
  },
  watch: {
    count: function(n, o) {
      if (this.count > 4) {
        for (let i = 0; i < this.interests.length; i++) {
         if (!this.interests[i].checked) {
            this.interests[i].disabled = true;
          } else {`
            this.interests[i].disabled = false;
          }
        }
      } else {
        for (let i = 0; i < this.interests.length; i++) {
          this.interests[i].disabled = false;
        }
      }
    }
  }
};
</script>
<style scoped>
.interest__btn {
  font-family: Arial;
  font-size: 1em;
  background: white;
  color: #333333;
  border: 1px solid #0091da;
  text-transform: none;
}
.interest__btn:hover {
  color: black;
  background-color: rgba(172, 196, 221, 0.7);
}
.interests__content {
  padding: 1.7em;
}
.blue {
  background-color: #0091da;
  color: white !important;
  text-transform: none;
}
</style>
© www.soinside.com 2019 - 2024. All rights reserved.