Vue.js SyntaxError: Identifier came out of nowhere

An error was reported by VUE debug mode in this line of my code:

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

The documentation does not provide instructions on how to include a variable within a style binding.

You can view 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;
            }

        }


});
javascriptvue.jsvuejs2vue-component

Answer №1

Try implementing a computed property for this solution.

computed: {
   //choose any name you like
   layout() {
     return {transform : 'translate3d(' + this.positionX + 'px, 0, 0)'}
   }
}

To apply it, update your binding to :style="this.layout"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide for sending token through Authorization in Laravel 8 API

I am currently utilizing Laravel 8 as an API REST and encountering an issue where my token is null when sent in the AJAX request. I have successfully handled logins and requests without tokens, but this specific scenario has me puzzled. Within my JavaScri ...

javascriptphpjquerylaravellaravel-8

Problem with resizing in CSS and jQuery

I need help creating a chatbox that can be resized. I've almost got it, but the bottom part of the chatbox detaches when I resize it. Also, I'm having trouble making the userList a fixed size that won't be affected by resizing. Check out th ...

javascriptjquerycss

For every iteration, verify the presence of the image

I am currently working on a foreach loop to iterate over the data returned by an ajax call. Within this loop, I am checking if each record has an associated image. Code for Checking Image Existence: function checkImageExists(url, callback) { var img ...

javascriptjquery

Combine the object with TypeScript

Within my Angular application, the data is structured as follows: forEachArrayOne = [ { id: 1, name: "userOne" }, { id: 2, name: "userTwo" }, { id: 3, name: "userThree" } ] forEachArrayTwo = [ { id: 1, name: "userFour" }, { id: ...

javascriptangulartypescriptobjectmerge

Tips for extracting the src attribute from a dynamically generated iframe

My dilemma stems from a function that generates an iframe with content on my website, which unfortunately I cannot control as it is loaded remotely. The function initially creates: <span id="myspan"></span> Once the JavaScript function fu ...

javascripthtmliframe

Is it a breach of separation of concerns to validate using ng-pattern?

I have a requirement in Singapore to validate contact numbers entered by users. The number must start with 6, 8, or 9 and should have a total of 8 digits. I am currently utilizing ng-pattern on an input field with a regex solution, but I am concerned abo ...

javascriptangularjs

When selecting a different file after initially choosing one, the Javascript file upload event will return e.target as null

Currently, I have implemented file uploading using <input>. However, when attempting to change the file after already selecting one, the website crashes and states that event.target is null. <Button label="Upload S3 File"> <input ...

javascriptreactjstypescriptreact-hooks

Enhancing choices for a select tag that is generated dynamically

I am encountering challenges while adding options to the dynamically generated select tags using jQuery. The options are fetched from a database, and I want to display all these options for each dynamically created select tag. Could you please point out w ...

javascriptjqueryajax

Verifying TypeScript errors before each commit in a Vue application

We have set up a git hook in our app using Husky for pre-commit actions. Whenever someone commits code, it triggers the pre-commit code - #!/bin/sh . "$(dirname "$0")/_/husky.sh" export NVM_DIR="$HOME/.nvm" [ -s "$NVM_ ...

typescriptvue.jslintpre-commithusky

How can you conceal an object based on specific conditions in JavaScript?

In my JavaScript code, I am working with an object that stores multiple values. However, I want to be able to hide a specific object under certain conditions. Here is the data structure: $scope.sort={ National : { prop: "Country", classes: { md: ...

javascriptjqueryangularjs

Passing data between child components in Vue.js

Looking to send and display data from one child component to another within a main component in my Vue application. Any tips on how to effectively pass data between two child components? Example: I have Component A and Component B. Component B has a clic ...

vue.jsvue-component

Unique: "Best Practices for Setting Angular.js Controller Data Directly in the Code"

In this scenario, I need to initialize the data from an inline script, even though I know how to achieve this using a promise on an http request. Currently, the controller is already defined in the header js: var testModule = angular.module('myTestM ...

javascriptangularjs

Issue with React useCallback not being triggered upon a change in its dependencies

useCallback seems to be capturing the wrong value of its dependency each time. const [state, setState] = React.useState(0); const callback = React.useCallback(() => { console.log(state); // always prints 0, why? }, [state]); React.useEffec ...

javascriptreactjstypescriptreact-hooks

Tips for identifying if the cursor is hovering over the :before or :after section of an element

One of the challenges I am facing involves CSS and defining drop areas for users to interact with, allowing them to either drop a section before or after existing sections. .section:before, .section:after { content: "[insert here]"; height: 64px; ...

javascriptjquerycsspseudo-element

What are the recommended practices for utilizing AJAX effectively?

As I dive into learning javascript best practices, I find myself a bit confused. From what I've gathered, the recommended ajax practice is: function doSomething(arg1, arg2) { jQuery.ajax({ var urlink = resourceURL url: urlink, ...

javascriptjqueryajax

Ways to implement a worldwide change in a subordinate entity

I am facing a challenge where I need to apply a global position, obtained from a WebVR controller, to a child object that is nested within multiple parent objects with transformations. The child object I want to update does not have any transformations app ...

javascriptthree.js

Decoding JavaScript elements embedded in an HTML website

My current HTML site includes the following code: <script type="text/javascript"> jwplayer('player_container').setup( { 'width': '640', ...

javascriptandroidhtmlregexjsoup

Limiting client requests on the Azure Translation API

I have a client who needs to limit the number of requests made to my Azure Translation API service. I found information from Microsoft on how to implement request throttling, but it's unclear where exactly in the request this throttling data should be ...

javascriptazurecurltranslationthrottling

Error: When attempting to utilize the Image-Slider, an issue arises with reading the property 'classList' which is undefined

I am currently in the process of developing a website using Strapi as my CMS and Next.js(React) for the frontend. The website features an image slider that includes images, headlines, and descriptions. However, I have encountered an issue where after spen ...

javascriptreactjsruntime-errornext.jsstrapi

Efficient guide to unlock the secrets of JS height measurements

I've noticed that there are several different 'Height' related properties in JavaScript such as clientHeight, Window.height, scrollHeight, offsetHeight, and more. Although I have a general idea of what they do, I am seeking a formal and det ...

javascripthtmlcss