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.
Closed this issue · 8 comments
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.
Could you provide more details like your code, environment etc?
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"
},
What browser are you using?
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
ok,chrome
I need 11:00 pm Beijing time to test, I will ask you tomorrow. thank you very much
Sure thing!
Do you have any update on that? Can we close the issue, if you resolved your problem?