Question

我有一个ace编辑器组件，基本上在我的视图中显示了一个ace编辑器。组件看起来像这样：

<template>
    <editor v-model="content" @init="editorInit" lang="javascript" theme="chaos" width="100%" height="100%"></editor>
</template>

<script>
    export default {
        props: [],

        data () {
            return {
                language: 'javascript',
                content: "",
            }
        },

        components: {
            editor: require('vue2-ace-editor'),
        },

        methods: {
            editorInit () {
                require('brace/ext/language_tools'); //language extension prerequsite...
                require('brace/mode/html');
                require('brace/mode/javascript');    //language
                require('brace/mode/less');
                require('brace/theme/ambiance');
                require('brace/theme/chaos');
                require('brace/theme/chrome');
            }
        },
    }
</script>

现在我创建了一个额外的组件来选择另一个主题并在我的编辑器中更改主题样式。它看起来像这样：

<template>
    <div>
        <v-select
            :items="themes"
            v-model="themeSelection"
            label="Select"
            single-line
        ></v-select>
    </div>
</template>

<script>
export default {

    data () {
        return {
            themeSelection: null,
            themes: [
                { text: 'ambiance' },
                { text: 'chaos' },
                { text: 'chrome' },
            ]
        }
    }    
}
</script>

现在我想在选择不同的主题后更改aceeditorcomponent中的lang属性我该怎么做？

<editor v-model="content" @init="editorInit" lang="JavaScript" theme="chaosNEEDSTOBECHANGEDONSELECT" width="100%" height="100%"></editor>

选择更改组件属性的Vuejs

0 个答案: