Vue v-model not responsive

I am using Laravel spark with Vuejs but when I create a new instance of Vue and include it in my main.js file it my elements don't get shown when a specific option is selected:

Here is my Vue instance file contents called traffic.js:

var one = new Vue({
    el:'#hidable,
    data: {
            traffic:'all'
        }
})

And here is my markup:

<div id="hidable">

    <select v-model="traffic">
        <option value="all">All</option>
        <option value="organic">SEO traffic</option>
        <option value="social">Social media</option>
    </select>

    <span v-if="traffic === 'all'">You have selected all traffic</span>
    <span v-else-if="traffic === 'organic'">You have selected SEO traffic</span>
    <span v-else-if="traffic === 'social'"> You have selected social media traffic</span>

</div>

My main app.js looks like this:

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);
////
require('spark-bootstrap');

require('./components/bootstrap');
require('./traffic')
var app = new Vue({
    mixins: [require('spark')],
});

Since I set traffic as all in the data of The Vue instance then the first span is visible when the page loads but changing the option in the select menu doesn't change the behaviour and its not responsive.

Any ideas what I am doing wrong?

MaverickChan

6 years ago

Level 47

data: {
            traffic:''
        }

in template

<select v-model="traffic">
        <option value="all" selected="selected">All</option>
        <option value="organic">SEO traffic</option>
        <option value="social">Social media</option>
    </select>

demoskp

6 years ago

Level 2

Hi there that doesn't work as the only thing is does is that it has the first option selected but the data object traffic is never updated, that is my issue the reactivity is not there for some reason.

MaverickChan

6 years ago

Level 47

@DEMOSKP - did you run

npm run dev

demoskp

6 years ago

Level 2

Yeah I am watching for asset changes and recombining them automatically, I have run npm run watch.

demoskp

6 years ago

Level 2

I found the issue, for this to work you just have to mount the component within the main component as such:

require('./traffic');

Vue.component('home',{
    components: {
        traffic
    },
    props:['user'],

    ready(){
        
    }
});

ekpono

6 years ago

Level 12

The el: #hidable does not have closing single quote

    el:'#hidable,
    data: {
            traffic:'all'
        }
})```

Change it to 

```var one = new Vue({
    el:'#hidable',
    data: {
            traffic:'all'
        }
})```

Please or to participate in this conversation.