Vuejs select不会选择正确的选项

Question

当我在编辑页面时，我希望默认选择我保存的产品标签。

目前它只选择其中的 1 个并重复我有多少标签（示例）

代码

HTML

<el-col :span="22">
    <el-select
        v-model="form.tags"
        multiple
        filterable
        style="width:100%;"
        allow-create
        default-first-option
        placeholder="Choose tags for your product">
        <el-option
            v-for="item in tagss"
            :key="item.id"
            :label="item.name"
            :value="item.name">
        </el-option>
    </el-select>
</el-col>

<el-form-item label="Categories">
    <el-col :span="24">
        <el-cascader
            v-model="form.categories"
            style="width: 100%;"
            :options="cats"
            :props="{
                multiple: true,
                checkStrictly: true,
                value: 'id',
                label: 'name',
            }"
            clearable
            filterable>
        </el-cascader>
    </el-col>
</el-form-item>

Script

data() {
    return {
        cats: [],
        tagss: [],
        form: {
            tags: [],
            categories: [],
            _method: 'PUT',
        },
    }
},
mounted () {
    this.fetchProduct()
    this.getData()
},
methods: {
    getData () {
        axios.get('/api/admin/products', {
            headers: {
            Authorization: 'Bearer ' + localStorage.getItem('access_token')
            }
        })
        .then(response => {
            this.brands = response.data.brands;
            this.cats = response.data.categories;
            this.tagss = response.data.tags;
        })
        .catch(function (error) {
            console.log('error', error);
        });
    },
    fetchProduct() {
        axios
            .get('/api/admin/products/'+this.$route.params.id, {
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('access_token')
                }
            })
            .then(response => {
                this.form.tags = response.data.data.tags
                this.form.categories = response.data.data.categories
                console.log('all tags from backend: ', this.tagss) // sample data below
                console.log('this product tags from backend: ', response.data.data.tags) // sample data below
            })
            .catch(function (error) {
                console.log('error', error);
            });
    }
}

这是上面代码中我的console.log 的示例结果

注意：我在这个问题中提到了我的标签，但也分享了我的类别代码，因为你可以看到我的类别有同样的问题。

知道可能是什么问题吗？

Answer 1

已解决

Final code

this.form.tags = response.data.data.tags.map(row => row.name);
this.form.categories = response.data.data.categories.map(row => row.id);

Result