Question

所以我正在使用Vuejs / Vuetify创建一个Web表单，我需要为用户提供一个编辑现有数据的选项。当我在编辑页面上时，我有一个“项目”对象，其中包含用户可以编辑的所有属性/值。我可以通过v-model将这些绑定到v-text-field而不会出现问题。将现有值绑定到v-select组件时会出现问题。它没有用它所绑定的v模型的值填充v-select框。值得注意的是，我需要传递给后端的是品牌ID，但我需要向UI展示的是品牌名称（字符串）

<v-select
 :items="brandOptions"
 :error-message="['Please select a brand']"
 required
 placeholder="Select a brand"
 item-text="brand"
 item-value="id"
 id="brand"
 v-model="product.brand"
></v-select>

Answer 1

这是我的工作示例，没有v-model相同的sens，我只是为数据指定了值

模板

<v-select :onChange="initialPriceControll" :options="price_types"></v-select>`,
js: `export default {
  data() {
    return {
        price_type:'Fixed',
        price_types: [
            'Fixed',
            'Negotiable',
            'Giveaway'
        ],
        show_negotiable_price: false
    }
},
methods: {
    initialPriceControll(e){
        this.price_type = e;
        if (e == 'Negotiable') {
            this.show_negotiable_price = true
        } else {
            this.show_negotiable_price = false
        }
        this.$emit('selectPrice', { 
                display: this.show_negotiable_price,
                price_type: this.price_type
            });
    }
  }
}

Answer 2

在模板中：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('core.urls')),
]

在脚本中：

<v-select
  v-model="theModel"
  v-bind:items="['a', 'b', 'c', 'd']"
  label="theLabel"
 ></v-select>

如何将v-model绑定到v-select

2 个答案: