Question

我在使用Semantic-UI可搜索下拉列表和Vuejs数据绑定时遇到问题，目前，无论选择哪个下拉列表选项，它都只能对绑定的1个更改选项进行建模。下面是我的代码。

我尝试使用@change事件，但这没有为我带来任何结果。

           <select
              name="clients"
              id="clients"
              class="ui fluid search selection dropdown uppercase"
              v-model="selected_client"
            >
              <option value>Select Client</option>
              <option
                v-for="(client, index) in clients"
                :key="index"
                :value="client.services"
              >{{client.firstname}}, {{client.lastname}}</option>
            </select>

Answer 1

我意识到我的错误，这不是在@change事件处理程序上，而是我如何处理v-bind键，因为v-bind希望每个键都是唯一的，所以在我的情况下，我没有提供此类信息，所以我将事件传递给一个方法，该方法根据作为值给出的ID过滤出特定的客户端。以下是对我有用的解决方案。

我希望有人会觉得有用。

       <select
          name="clients"
          id="clients"
          class="ui fluid search selection dropdown uppercase"
          @change="clientData($event)"
        >
          <option value>Select Client</option>
          <option
            v-for="client in clients"
            :key="client.id"
            :value="client.id"
          >{{client.firstname}}, {{client.lastname}}</option>
        </select>

使用Vue.js使用语义ui可搜索下拉列表进行双向数据绑定

1 个答案: