Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

brandenwagner's avatar

Vue Select 2

This is a vue issue and a spark issue, so maybe i should post in the vue channel, but i figured it might have something to do with spark. I am trying to use a vue select2 component from https://sagalbot.github.io/vue-select/

I am working on a notifications package: http://github.com/pureintellect/notifications

npm run dev works just fine but I am getting errors (which are unhelpful) when going to the page.

   [Error] TypeError: e._v is not a function. (In 'e._v(" ")', 'e._v' is undefined) — app.js:75:23750
    _render (app.js:80:14445)
    (anonymous function) (app.js:80:8869)
    get (app.js:81:30643)
    ki (app.js:81:30581)
    _mount (app.js:80:8836)
    se (app.js:80:11649)
    o (app.js:80:25146)
    s (app.js:80:25719)
    o (app.js:80:25531)
    s (app.js:80:25719)
    o (app.js:80:25531)
    s (app.js:80:25719)
    o (app.js:80:25531)
    s (app.js:80:25719)
    o (app.js:80:25531)
    s (app.js:80:25719)
    o (app.js:80:25531)
    s (app.js:80:25719)
    o (app.js:80:25531)
    (anonymous function) (app.js:80:29937)
    _update (app.js:80:9107)
    (anonymous function) (app.js:80:8859)
    get (app.js:81:30643)
    ki (app.js:81:30581)
    _mount (app.js:80:8836)
    se (app.js:80:11649)
    o (app.js:80:25146)
    s (app.js:80:25719)
    o (app.js:80:25531)
    s (app.js:80:25719)
    o (app.js:80:25531)
    s (app.js:80:25719)
    o (app.js:80:25531)
    s (app.js:80:25719)
    o (app.js:80:25531)
    s (app.js:80:25719)
    o (app.js:80:25531)
    (anonymous function) (app.js:80:29937)
    _update (app.js:80:9107)
    (anonymous function) (app.js:80:8859)
    get (app.js:81:30643)
    ki (app.js:81:30581)
    _mount (app.js:80:8836)
    se (app.js:80:11649)
    o (app.js:80:25146)
    s (app.js:80:25719)
    o (app.js:80:25531)
    (anonymous function) (app.js:80:29743)
    _update (app.js:80:9107)
    (anonymous function) (app.js:80:8859)
    get (app.js:81:30643)
    ki (app.js:81:30581)
    _mount (app.js:80:8836)
    ve (app.js:80:13781)
    _init (app.js:80:17391)
    Te (app.js:80:18069)
    (anonymous function) (app.js:58:11311)
    t (app.js:1:106)
    (anonymous function) (app.js:82:16442)
    t (app.js:1:106)
    (anonymous function) (app.js:1:488)
    Global Code (app.js:1:498)

Here is my component

import vSelect from 'vue-select'

Vue.component('spark-kiosk-notifications', {
    components: { vSelect },
    props: [],
    data() {
        var notificationsCreateForm = function() {
          return {
            id: '',
            body: '',
            user_id:'',
            action_text: '',
            action_url: '',
            created_by: '',
          }
        }
        return {
          updatingNotification: null,
          deletingNotification: null,
          'notifications': [],
          'users': [],
          'newNotification': new SparkForm(notificationsCreateForm()),
          'updateForm': new SparkForm(notificationsCreateForm()),
          'deleteForm': new SparkForm({}),
          'selected': null,
          'options': ['foo','bar','blah']
        };
    },
    mounted(){
        this.getNotifications();
        this.getUsers();
    },
    methods: {
        /**
         * Get all of the notifications.
         */
        getNotifications: function(){
            axios.get('/pi/notifications/notifications')
                .then(response => {
                    this.notifications = response.data;
                });
        },

        /**
         * Get all of the users.
         */
        getUsers: function(){
            axios.get('/pi/notifications/get/users')
                .then(response => {
                    this.users = response.data;
                });
        },

        /**
         * Create Notification.
         */
        createNotification: function(){
            axios.post('/pi/notifications/notifications', this.newNotification)
                .then(response => {
                    this.newNotification = {};
                    this.getNotifications();
                });
        },
        editNotification(notification)
        {
            this.updatingNotification = notification;

            this.updateForm.body = notification.body;
            this.updateForm.user_id = notification.user_id;
            this.updateForm.action_text = notification.action_text;
            this.updateForm.action_url = notification.action_url;
            this.updateForm.created_by = notification.created_by;

            $('#modal-update-notification').modal('show');
        },
        update() {
          Spark.put('/pi/notifications/notifications' + this.updatingNotification)
            .then(() => {
              this.getNotifications();
              $('#modal-update-notification').modal('hide');
            });
        },

        /**
         * Show the approval dialog for deleting an announcement.
         */
        approveNotificationDelete(notification) {
            this.deletingNotification = notification;
            $('#modal-delete-notification').modal('show');
        },


        /**
         * Delete the specified announcement.
         */
        deleteNotification() {
            Spark.delete('/pi/notifications/notifications/' + this.deletingNotification.id, this.deleteForm)
                .then(response => {
                    this.results = response;
                    this.getNotifications();
                    $('#modal-delete-notification').modal('hide');
                });
        }

    }
});

Im sure im doing something stupid, can anyone correct me?

0 likes
1 reply
brandenwagner's avatar
brandenwagner
OP
Best Answer
Level 4

Figured it out... I just had to update Vue to a new version. I was using 2.1.3 but once i went to 2.2.0 the error went away.

Please or to participate in this conversation.