Vue 语义 ui select 样式问题

Question

我在 v-for 循环中设置 select 的样式时遇到问题。不太确定是什么原因造成的，似乎没有执行特定于下拉列表的 javascript。

基本上学生有评价，老师可以看到这些评价并能给评价打分

由于某种原因，成绩 select 的样式不正确

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 并围绕它编写样式。如果这似乎不可能，我会深入研究框架的样式，然后在其中进行修复。

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

Answer 2

通过添加解决了它：

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

并在我的 select 上添加指令：

<select v-dropdown>

Vue 语义 ui select 样式问题

Vue semantic ui select styling issue

semantic-ui

vue.js