CODEWITHSUNDEEP
vue.jsrenderelement-ui
Sol Badguy
Sol Badguy

Reputation: 29

"Failed to generate render function" when i use tree component of ElementUI

I want to use Element UI in IE 11,and when i user the tree component,it creates errors. It will create the error

Failed to generate render function:
SyntaxError 'missing  in'

I want to show a icon before the text.But in IE 11,it errors while Chrome ok.

Anyone can tell me the problem..thx

the whole demo is 

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MLLRSJ</title>

<link rel="stylesheet" href="./Scripts/assets/Element/index.css">
<script src="./Scripts/assets/vue/vue.js"></script>
<script src="./Scripts/assets/Element/index.js"></script>
</head>
<body>
<div id='Element'>
<el-tree :data="tree" :props="treeProps">
        <span slot-scope='{node,data}'>
            <i class='el-icon-check'></i>
            <span style="display:inline" v-html='node.label'></span>
        </span>
</el-tree>
</div>

</body>
<script>
var vm = new Vue({
    el:'#Element',
    data:{
        tree:[{
                label:'1',
                children:[{
                        label:'1-1'
                }],
            },
            {
                label:'2',
                children:[
                    {
                        label:'2-1'
                    }
                ]
            }
        ],
        treeProps:{
            label:'label',
            children:'children'
        }
    }
})
</script>
</html>

Upvotes: 1

Views: 549

Answers (1)

Max Sinev
Max Sinev

Reputation: 6019

Try to avoid curly braces(in slot-scope in your example) and arrow functions in inline templates if you work with IE11 (I had same problem in one of my projects):

<el-tree :data="tree" :props="treeProps">
    <span slot-scope='someObject'>
        <i class='el-icon-check'></i>
        <span style="display:inline" v-html='someObject.node.label'></span>
    </span>
</el-tree>

Upvotes: 2

Related Questions