How to initialize one variable from another variable in Vue.js

Question

I want to initialize one variable with another variable in Vue js Here I want to initialize 'multiple' variable with 'select' variable

    <div id="myapp">
     <select v-model="select">
            <option selected>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected {{select}}</span>
        <hr>
        <select v-model="multiple" multiple>
            <option selected>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Multiple Selected :{{ multiple | JSON}}</span>
    </div>

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>   
<script>
    var vm=new Vue({
       el:'#myapp',
       data:{
                select:'B',
                multiple:select
        }
})
</script>`

Here I get an error like: Uncaught ReferenceError: select is not defined

Linus Borg · Accepted Answer · 2016-06-27 11:25:25Z

1

You can't access data properties like this in the data() method.

If you want to do this (though it seems a bit useless in this example), you will have to define a variable outside, and then reference it in data()

<script>
    var select = 'B'
    var vm=new Vue({
       el:'#myapp',
       data:{
                select: select,
                multiple:select
        }
})
</script>`

answered Jun 27, 2016 at 11:25

Linus Borg

24.1k7 gold badges65 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

How to initialize one variable from another variable in Vue.js

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