2

我正在使用Vue.jsand制作一个项目Nuxt.js。我prismjs用于在我的页面上突出显示代码片段。我已经按照这里prismjs给出的安装了。

这是我的plugins/prism.js文件:

import Vue from "vue";
import Prism from "vue-prism-component";

import "prismjs";

import "prismjs/components/prism-c";
import "prismjs/components/prism-cpp";
import "prismjs/components/prism-java";
import "prismjs/components/prism-python";

import "assets/syntax-theme.css";

import "prismjs/plugins/line-numbers/prism-line-numbers.min";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";

import "prismjs/plugins/line-highlight/prism-line-highlight.min";
import "prismjs/plugins/line-highlight/prism-line-highlight.css";

Vue.component("prism", Prism);

这是我的 Vue 组件:

<template>
    <div>
        <!-- other content -->
        <prism language="c" class="line-numbers" :data-line="i">{{codeC}}</prism>
        <b-pagination :total-rows="n" per-page="1" v-model="i"></b-pagination>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                n: 5,
                i: 1,
                codeC:
                    'int linearSearch(int arr[], int n, int x) {\n' +
                    '   for (int i = 0; i < n; i++) {\n' +
                    '       if (arr[i] == x) {\n' +
                    '           return i;\n' +
                    '       }\n' +
                    '   }\n' +
                    '   return -1;\n' +
                    '}'
            }
        }
    }
</script>

我的问题是,当 i 的值从分页发生变化时,必须突出显示的行号不会改变。怎么了?变化i会反映在其他内容中。

4

0 回答 0