如何检查是否没有选定的值然后选择第一项？答案

【问题标题】：How to check if there is no selected value then select first item?如何检查是否没有选定的值然后选择第一项？
【发布时间】：2020-11-17 01:09:33
【问题描述】：

我正在尝试在 Array 中的每个对象内添加新值，如果没有选定的标记，那么它将从下拉列表中选择第一个选项。关键是还有另一个从下拉列表中选择项目的功能。我怎样才能让它们正确地协同工作？

    <b-dropdown aria-role="list">
                    <b-button
                      icon-right="caret-down"
                      class="ToolbarButton"
                      size="is-small"
                    >
                      <span> isTagSelected(selectedProduct) </span>
                    </b-button>
    
                    <b-dropdownitem
                      v-for="selectedTag in selectedProduct.tags"
                      :key="selectedTag.id"
                      aria-role="listitem"
                      @click="selectTag(selectedProduct, selectedTag)"
                    >
                      {{ selectedTag.title }}
                    </b-dropdownItem>

 isTagSelected(selectedProduct) {
          if (!selectedProduct.tagTitle && selectedProduct.tags.length) {
            this.$set(selectedProduct.tags[0].id, 'tagId')
            this.$set(selectedProduct.tags[0].title, 'tagTitle')
            return selectedProduct.tagTitle
          }
    else { return selectedProduct.tagTitle}
        },

  selectTag: function(selectedProduct, selectedTag) {
      for (var i = 0; i < this.selectedProducts.length; i++) {
        if (this.selectedProducts[i].id === selectedProduct.id) {
          this.$set(this.selectedProducts[i], "tagId", selectedTag.id);
          this.$set(this.selectedProducts[i], "tagTitle", selectedTag.title);
        }
      }
    }

isTagSelected 函数抛出一个错误，我们无法在 this.$set 行中进行循环。怎么解决？

【问题讨论】：

“this.$set()”函数中只有两个参数。您想为新属性分配什么值？
如果用户尚未通过您昨天提供的函数选择值，我需要将标签数组的第一项标题分配给该 columnTitle。另外我希望它不会第二次设置属性
它说Cannot use 'in' operator to search for tagId
代码中仍有一些我不确定的地方。例如，即使 !selectedProduct.tagTitle 为 true，isTagSelected() 也会尝试返回 selectedProduct.tagTitle？
您昨天的代码完美运行，您从下拉列表中选择，选定的值被分配给稍后发送到后端的新属性。那部分很好。问题是，在用户从下拉列表中选择该值之前，我试图设置标签数组中的第一项的初始值，因此如果用户不选择任何内容，第一个值将被发送到后端。

标签： javascript vue.js ecmascript-6 vuejs2 vue-component

【解决方案1】：

如果我理解正确，您正在尝试将道具添加到 selectedProduct。如果您认为此逻辑正确，请告诉我：

 isTagSelected(selectedProduct) {
    if (!selectedProduct.tagTitle && selectedProduct.tags.length) {
        this.$set(selectedProduct, 'tagId', selectedProduct.tags[0].id)
        this.$set(selectedProduct, 'tagTitle', selectedProduct.tags[0].title)
        return selectedProduct.tagTitle
    }
    else { 
        return selectedProduct.tagTitle}
    }

【讨论】：

太棒了。非常感谢！！