Vuejs SyntaxError: Unexpected identifier

Question

VUE debug mode report an error in this line of my code:

:style="{transform : 'translate3d(' + translateX + 'px,0, 0)'}"\

In the docs they don't explain how to paint a variable within a style binding.

You can check my vuejs component here:

Vue.component('vue-tab', {

template: '<template>\
                <div class="tab-container">\
                    <ul class="tab-title-container">\
                        <li class="tab-title"\
                            v-for="(title,index) in tabtitles"\
                            :class="{active: index+1===currentPage}"\
                            :key="index"\
                            @click="setPage(index+1)">{{title}}\
                        </li>\
                    </ul>\
                    <!-- decide if bind touchstart -->\
                    <div v-if="slidable"\
                         class="tabswiper"\
                         :class="{invisible:invisible}"\
                         @touchstart="_onTouchStart">\
                        <div class="tabswiper-wrap"\
                             ref="tabswiper-wrap"\
                             :class="{dragging: dragging}"\
                             :style="{transform : 'translate3d(' + translateX + 'px,0, 0)'}"\
                             @transitionend="_onTransitionEnd">\
                            <slot></slot>\
                        </div>\
                    </div>\
                    <div v-else class="tabswiper"\
                         :class="{invisible:invisible}">\
                        <div class="tabswiper-wrap"\
                             ref="tabswiper-wrap"\
                             :class="{dragging: dragging}"\
                             :style="{'transform' : 'translate3d(' + translateX + 'px,0, 0)'}"\
                             @transitionend="_onTransitionEnd">\
                            <slot></slot>\
                        </div>\
                    </div>\
                </div>\
            </template>',


        props: {
            tabtitles: {
                type: Array,
                default: []
            },
            curPage: {
                type: Number,
                default: 1
            },
            slidable: {
                type: Boolean,
                default: true
            }
        },

        watch: {
            curPage: function (val) {
                this.setPage(val)
            }
        },

        data() {
            return {
                lastPage: 1,
                currentPage: this.curPage,
                translateX: 0,
                startTranslateX: 0,
                delta: 0,
                deltaY: 0,
                dragging: false,
                startPos: null,
                startPosY: null,
                transitioning: false,
                slideEls: [],
                invisible: true,
                judge: JUDGE_INITIAL,
            };
        },

        mounted(){
            this.$nextTick(function () {
                this._onTouchMove = this._onTouchMove.bind(this);
                this._onTouchEnd = this._onTouchEnd.bind(this);
                this.slideEls = this.$refs['tabswiper-wrap'].children;
                this.dragging = true;
                this.setPage(this.currentPage);
                let _this = this;
                setTimeout(() => {
                    _this.dragging = _this.invisible = false;
                }, 100)
                window.onresize=()=>{
                    _this.setPage(_this.currentPage)
                }
            })
        },

        methods: {

            next() {
                var page = this.currentPage;
                if (page < this.slideEls.length) {
                    page++;
                    this.setPage(page);
                } else {
                    this._revert();
                }
            },

            prev() {
                var page = this.currentPage;
                if (page > 1) {
                    page--;
                    this.setPage(page);
                } else {
                    this._revert();
                }
            },

            setPage(page) {
                this.lastPage = this.currentPage;
                this.currentPage = page;

                this.translateX = -[].reduce.call(this.slideEls, function (total, el, i) {
                    //previousValue,currentValue,currentIndex
                    return i > page - 2 ? total : total + el['clientWidth'];
                }, 0);
                this._onTransitionStart();
            },

            _onTouchStart(e) {
                this.startPos = this._getTouchPos(e);
                this.startYPos = this._getTouchYPos(e);
                this.delta = 0;
                this.startTranslateX = this.translateX;
                this.startTime = new Date().getTime();
                this.dragging = true;

                document.addEventListener('touchmove', this._onTouchMove, false);
                document.addEventListener('touchend', this._onTouchEnd, false);
            },

            _onTouchMove(e) {
                this.delta = this._getTouchPos(e) - this.startPos;
                this.deltaY = Math.abs(this._getTouchYPos(e) - this.startYPos);

                switch (this.judge) {
                    case JUDGE_INITIAL:
                        // if (Math.abs(this.delta) > 20 && this.deltaY<25) {//judge to allow/prevent scroll
                        if (Math.abs(this.delta) / this.deltaY > 1.5) {//judge to allow/prevent scroll
                            this.judge = JUDGE_SLIDEING
                            e.preventDefault();
                            e.stopPropagation()
                        } else {
                            this.judge = JUDGE_SCROLLING
                        }
                        break;
                    case JUDGE_SCROLLING:

                        break;
                    case JUDGE_SLIDEING:
                        e.preventDefault();
                        e.stopPropagation()
                        this.translateX = this.startTranslateX + this.delta;
                        break;

                    default:

                        break;
                }

            },

            _onTouchEnd(e) {
                this.dragging = false;
                if (this.judge == JUDGE_SLIDEING) {
                    var isQuickAction = new Date().getTime() - this.startTime < 1000;
                    if (this.delta < -100 || (isQuickAction && this.delta < -15 && this.deltaY / this.delta > -6)) {
                        this.next();
                    } else if (this.delta > 100 || (isQuickAction && this.delta > 15 && this.deltaY / this.delta < 6)) {
                        this.prev();
                    } else {
                        this._revert();
                    }
                }
                this.judge = JUDGE_INITIAL
                document.removeEventListener('touchmove', this._onTouchMove);
                document.removeEventListener('touchend', this._onTouchEnd);
            },

            _revert() {
                this.setPage(this.currentPage);
            },

            _getTouchPos(e) {
                var key = 'pageX';
                return e.changedTouches ? e.changedTouches[0][key] : e[key];
            },

            _getTouchYPos(e) {
                var key = 'pageY';
                return e.changedTouches ? e.changedTouches[0][key] : e[key];
            },

            _onTransitionStart() {
                this.transitioning = true;
                if (this._isPageChanged()) {
                    this.$emit('tab-change-start', this.currentPage);
                    //FIX:remove the height of the hidden tab-items
                    [].forEach.call(this.slideEls,(item,index)=>{
                        if (index== (this.currentPage-1)) {
                            removeClass(item,'hide-height')
                        }
                        else {
                            addClass(item,'hide-height')
                        }


                    })
                } else {
                    this.$emit('tab-revert-start', this.currentPage);
                }
            },

            _onTransitionEnd(e) {
                e.stopPropagation()
                if (e.target.className != 'tabswiper-wrap') return;
                this.transitioning = false;
                if (this._isPageChanged()) {
                    this.$emit('tab-change-end', this.currentPage);
                } else {
                    this.$emit('tab-revert-end', this.currentPage);
                }
            },
            _isPageChanged() {
                return this.lastPage !== this.currentPage;
            }

        }


});

Your use of mixed quotes malforms the string (check the black-colored "translate3d" part in the snippet). You could fix this by wrapping the string in backticks instead of single quotes, but a computed is a better solution, — yuriy636
– yuriy636, Commented Sep 4, 2018 at 9:37

Jns · Accepted Answer · 2018-09-04 09:35:21Z

1

You could use a computed property.

computed: {
   //however you want to call it
   style() {
     return {transform : 'translate3d(' + this.translateX + 'px, 0, 0)'}
   }
}

To use it just change your binding to :style="this.style"

edited Sep 4, 2018 at 9:35

answered Sep 4, 2018 at 9:29

Jns

3,2871 gold badge20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs SyntaxError: Unexpected identifier

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related