在Vue.js中选择另一个选项后，如何使此下拉列表更改值？

我们正在尝试从下拉选项中选择另一项，但它不会更改值：

     <b-dropdown aria-role="list">
        <b-button
          icon-right="caret-down"
          class="dropdown"
          size="is-small"
          slot="trigger"
        >
          <span>{{selectedProduct}}</span>
        </b-button>
<b-dropdown-item
          v-for="product in products"
          :key="product.id"
          aria-role="listitem"
          @click="setItem(selectedProduct)"
          v-model="selectedProductTag"
        >
          {{ product.name }}
        </b-dropdown-item>
      </b-dropdown>

**js part**

    editProduct(){
    ...
    ...
        this.selectedProductTag = {
          id: selectedProductId,
          name: product.name,
          tag: product.tag,
        };
    
    }

  setItem(selectedProduct) {
      this.selectedProduct = selectedProduct
    },

{{selectedProduct}}
{{product.name}
**js部分**
编辑产品（）{
...
...
this.selectedProductTag={
id:selectedProductId，
名称：product.name，
tag:product.tag，
};
}
setItem（selectedProduct）{
this.selectedProduct=selectedProduct
},

---

如何使其同时更改所选选项标签和v模型对象数据？

我看到您使用的是

引导vue

组件，但是，对于您正在执行的操作，我建议您改用该组件。但无论如何，使用

下拉列表

组件：

在HTML中

在

方法

部分

---

这不是问题，只是没有选择其他选项，也没有改变价值。代码太大，无法制作沙盒。请阅读

<b-dropdown aria-role="list" v-bind:text="(selectedProduct.id == 0? 'Select here' : selectedProduct.name)">
  <b-dropdown-item
    v-for="(product, index) in products"
    :key="index"
    aria-role="listitem"
    @click="setItem(product)"
  >{{ product.name }}</b-dropdown-item>
</b-dropdown>

data() {
  products: [
    {
      id: 1,
      name: "test1",
      value: 1,
      etc: "..."
    },
    {
      id: 2,
      name: "test2",
      value: 2,
      etc: "..."
    }
    //....
  ],
  selectedProduct: {
    id: 0,
    name: "",
    value: 0,
    etc: "..."
  }
  //Make sure not to set selectedProduct to `null`, as it could result on an error
}

setItem: function(product) {
  this.selectedProduct = product;
},