Property or method "emojis" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[clp334264003]

Property or method "emojis" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. I don't know where it is wrong? The online environment is abnormal and the test environment is normal.

[DCzajkowski]

Could you provide more details like your code, environment etc?

[clp334264003]

thank you very much! HTML :

<!--<li class="clearfix" style="margin-bottom: 5px;">-->
    <!--<div class="checkResult-listLt">{{title}}：</div>-->
    <!--<div class="checkResult-listRt">-->
        <!--<textarea v-validate="'required|max:500'" name="content" class="form-control page-input-lg" rows="3" v-model.trim="content"></textarea>    -->
        <!--<br>-->
    <!--</div>-->
<!--</li>-->
<!--<li style="margin-bottom: -15px;">-->
    <!--<div style="line-height: 30px;margin-left: 650px">-->
        <!--<emoji-picker @emoji="insert">-->
            <!--<div slot="emoji-invoker" slot-scope="{ events }" v-on="events">-->
                <!--<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">-->
                    <!--<path d="M0 0h24v24H0z" fill="none"/>-->
                    <!--<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/>-->
                <!--</svg>-->
                <!--<span class="glyphicon glyphicon-question-sign" aria-hidden="true" title="若图片无法正常显示，点击下载补丁" @click="goToDownloadPage"></span>-->
            <!--</div>-->
            <!--<div slot="emoji-picker" slot-scope="{ emojis, insert ,display}">-->
                <!--<div class="emoji-picker" >-->
                    <!--<div>-->
                        <!--<div v-for="(emojiGroup, category) in emojis" :key="category">-->
                            <!--<h5>{{ category }}</h5>-->
                            <!--<div>-->
                                <!--<span v-for="(emoji, emojiName) in emojiGroup" :key="emojiName" @click="insert(emoji)" :title="emojiName">{{ emoji }}</span>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</emoji-picker>-->
    <!--</div>-->
<!--</li>-->

JS ： import template from './index.html'; import EmojiPicker from 'vue-emoji-picker'; import emojiCss from './index.css';

export default { template, data(){ return { content: this.value, }; }, props: ['value','title','clickCallback'], created(){

},
computed: {

},
watch: {
    'content':function(newContent){
        if (this.clickCallback && typeof this.clickCallback === 'function') {
            this.clickCallback(newContent);
        }

    },
},
mounted () {
},
methods: {
    goToDownloadPage(){
        window.open("https://support.microsoft.com/zh-cn/help/2729094/an-update-for-the-segoe-ui-symbol-font-in-windows-7-and-in-windows-ser");
    },
    insert(emoji) {
        this.content += emoji;            
    },

},
components: {
    'emoji-picker': EmojiPicker,
}

};

environment ： "dependencies": { "Plupload": "git+https://github.com/moxiecode/plupload.git", "babel-polyfill": "^6.16.0", "blueimp-md5": "^2.5.0", "cropper": "^2.3.4", "echarts": "^3.8.5", "emoji-mart-vue": "^1.0.2", "es6-promise": "^4.0.5", "flatpickr": "^2.6.3", "jQuery-ajaxTransport-XDomainRequest": "git+https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest.git", "jquery": "^3.1.1", "js-cookie": "^2.1.3", "url-search-params-polyfill": "^1.0.1", "vee-validate": "2.0.0-beta.21", "viewerjs": "^0.6.0", "vue": "^2.3.3", "vue-emoji": "0.0.2", "vue-emoji-component": "0.0.7", "vue-emoji-picker": "^1.0.1", "vue-loading": "^0.1.4", "vue-router": "^2.0.1", "vue-slider-component": "git+https://github.com/NightCatSama/vue-slider-component.git", "vue-spinner": "^1.0.2", "vuex": "^1.0.0" }, "devDependencies": { "babel-core": "^6.18.2", "babel-loader": "^6.2.7", "babel-plugin-transform-runtime": "^6.15.0", "babel-preset-es2015": "^6.18.0", "babel-runtime": "^6.18.0", "clean-webpack-plugin": "^0.1.14", "css-loader": "^0.25.0", "eslint": "^4.10.0", "exports-loader": "^0.6.3", "expose-loader": "^0.7.1", "file-loader": "^0.9.0", "html-loader": "^0.4.4", "html-webpack-plugin": "^2.24.1", "html-withimg-loader": "^0.1.16", "imports-loader": "^0.6.5", "json-loader": "^0.5.7", "nyan-progress-webpack-plugin": "^1.1.4", "style-loader": "^0.13.2", "uglify-js": "^2.7.4", "url-loader": "^0.6.2", "v-charts": "^1.11.7", "vue-click-outside": "^1.0.7", "vue-html-loader": "^1.2.3", "vue-loader": "^9.8.1", "vue-style-loader": "^1.0.0", "webpack": "^1.15.0", "webpack-dev-server": "^1.16.2" },

[DCzajkowski]

What browser are you using?

[DCzajkowski]

Also, are you transpiling your code? Could you set up a simple repo with a reproduction of your issue? Or just compile your component using new vue cli 3.0

[clp334264003]

ok,chrome

[clp334264003]

I need 11:00 pm Beijing time to test, I will ask you tomorrow. thank you very much

[DCzajkowski]

Sure thing!

[DCzajkowski]

Do you have any update on that? Can we close the issue, if you resolved your problem?