如何使用 Vue js 创建收藏夹列表.允许用户选择最多 5 个选项

Question

首先，我是编程新手，也是这个频道的新手，所以如果我的问题结构不正确，我很抱歉。如果需要，我可以提供更多细节。提前感谢您的帮助。

上下文：我有一个包含多个选项(按钮(的视图，用户最多可以选择其中的 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>

Answer 1

Vue 的方法是将应用程序的所有状态都放在 js(你的 interests 数组(中，然后使处理此状态显示的所有内容都成为响应式的。实际上，这意味着对屏幕上将状态转换为像素的所有内容使用computed而不是methods。

在过去，我们会循环interests来计算检查的数字。在 2019 年，我们将使用 reduce((，所以...

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

然后在您的模板中...

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

Answer 2

我终于想出了一个解决方案，基本上使用观察器来知道计数器何时大于 5，并添加另一个值对来处理 disable 属性： `

{

{interest.name}}

            <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>