Vee validate 4 select's selected prop doesnt work

Sándor Kiss 0
Viewed 9

I'm having a problem with vee-validate package. My problem is the package cannot handle the selected attribute.

When the condition is true in the "selected" prop, the browser doesn't select it. I'm trying like this:

<div class="form-group">
    <Field name="brand_id"
           as="select"
           class="form-control"
           id="brandSelect"
    >
        <option value="">Válassz egyet</option>

        <option v-for="brand in brands"
                :value="brand.id"
                :selected="product.brand && product.brand.id == brand.id"
        >
            {{ brand.title }}
        </option>
    </Field>
    <ErrorMessage name="brand_id" />
</div>

package.json:

{
"private": true,
"scripts": {
    "dev": "vite",
    "build": "vite build"
},
"devDependencies": {
    "@popperjs/core": "^2.10.2",
    "@vitejs/plugin-vue": "^3.0.1",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.1",
    "laravel-vite-plugin": "^0.6.0",
    "lodash": "^4.17.21",
    "postcss": "^8.1.14",
    "sass": "^1.32.11",
    "vite": "^3.0.0",
    "vue": "^3.2.37"
},
"dependencies": {
    "vee-validate": "^4.6.9",
    "yup": "^0.32.11"
}

}

Anybody had/has this issue too?

prop vee-validate select laravel vue.js
1 Answers

With some workaround I have a solution to set the brand_id attributes correctly in the form with setFieldValue function of the correct <Form> ref:

let self = this;
Object.values(this.products).forEach(function (product) {
    if (! product.brand) {
        return;
    }

    let productFormRef = 'productForm' + product.id;

    self.$refs[productFormRef][0].setFieldValue('brand_id', product.brand.id);
});
Sándor Kiss0
Related