Question

我在v-for循环中设置选择样式时遇到问题。不确定是什么导致了这一点，似乎没有执行特定于下拉列表的JavaScript。

基本上学生都有评估，教师可以看到这些并且能够在评估中给出标记

由于某种原因，成绩选择没有正确设置样式

Evalution.vue：

```

<template>
    <div>
        <div v-for="(evaluation, index) in evaluations">
            <div v-if="index == 0" class="ui divider"></div>
            <h3>{{ evaluation.subject.name }}</h3>
            <p>Passed on: {{ moment(evaluation.passed_at).format("DD-MM-YYYY") }}</p>

            <div v-show="evaluation.pivot.result !== null">
                Note: {{ evaluation.pivot.result + "/20" }}
                &nbsp;&nbsp;
                <button class="ui blue button">Modify</button>
            </div>
            <div v-show="evaluation.pivot.result == null">
                <div class="ui sub header"></div>
                <select :id="'grade'+index" class="ui dropdown compact">
                    <option selected="selected" value="">Grade</option>
                    <template v-for="grade in grades">
                        <option :value="grade.id">
                            {{ grade.text }}
                        </option>
                    </template>

                </select>
                <button class="ui tiny red button">Rate</button>
            </div>

            <p>Corrected by: {{ evaluation.teacher.firstname }} {{ evaluation.teacher.lastname }}</p>
            <div v-if="index !== evaluations.length-1" class="ui divider"></div>
        </div>
    </div>
</template>

...

props: ['evaluations'],
data() {
            return {
                selectedGrade: '',
                grades: [
                    {text: "0", id: 0},
                    {text: "1", id: 1},
                    {text: "2", id: 2},
                    {text: "3", id: 3},
                    {text: "4", id: 4},
                    {text: "5", id: 5},
                    {text: "6", id: 6},
                    {text: "7", id: 7},
                    {text: "8", id: 8},
                    {text: "9", id: 9},
                    {text: "10", id: 10},
                    {text: "11", id: 11},
                    {text: "12", id: 12},
                    {text: "13", id: 13},
                    {text: "14", id: 14},
                    {text: "15", id: 15},
                    {text: "16", id: 16},
                    {text: "17", id: 17},
                    {text: "18", id: 18},
                    {text: "19", id: 19},
                    {text: "20", id: 20},

                ]
            }

```

Answer 1

使用UI框架的缺点是，有时样式的范围是自己的组件，因此您无法覆盖它们。我没有看到你在这里问的是什么（javascript问题），但你一直在提到样式。

在这种情况下，我创建了一个包装器div并在其周围编写样式。如果它似乎不可能，我会深入了解Framework的样式然后修复它。

另一种可能性是在组件中使用!important作为您需要在Framework中修复的样式属性。

Answer 2

通过添加：

解决了这个问题

Vue.directive('dropdown', {
    inserted(el) {
        $(el).dropdown()
    }
})

并在我的选择中添加指令：

<select v-dropdown>

Vue语义ui选择样式问题

2 个答案: