javascript - 使用vue.js实现联动效果

Question

想用vue.js写一个联动效果，按照自己的思路实验了下，并没有成功。请大家指点下
我的思路是：通过遍历YX数组，如果某个对象的text和第一个select的selected value相同，则显示对应院系的专业

<p id="test">
    <select v-model="A">
    <option v-for="yx in YX">
        {{yx.text}}
    </option>
</select>


<select name="ZY">
    <option v-for="zy in {{ selection }}">
        {{zy.text}}
    </option>
</select>
</p>

<script>
new Vue({
    el:'#test',
    data:{
        YX:[
            {
                text:'计信院',
                ZY:[
                    {text:'软件工程'},
                    {text:'计算机科学与技术'},
                    {text:"信息安全"},
                ]
            },
            { 
                text:'商学院',
                ZY:[
                    {text:'旅游管理'},
                    {text:'工商管理'},
                    {text:"行政管理"},
                ]
            },       
        ]
    },
    computed:{
        selection: {
            get: function() {
                var obj;
                var ZY = eval(this.YX)
                for(obj in ZY)
                {
                    if(A == obj.text)
                        B = obj.ZY
                }
                return B
            }
        }
    }
});
</script>

Answer 1

建议还是多看官方文档, 我的实现参考：http://jsfiddle.net/x1p47kpr/

Answer 2

eval都出来，这种问题用js判断下一个value再设置下另一个的option元素就完了，为何非要用框架解决

Answer 3

看看这个是不是你想要的

Answer 4

<p id="test">
    <select v-model="A">
        <option v-for="yx in YX">
            {{yx.text}}
        </option>
    </select>

    <select>
        <option v-for="zy in selection">
            {{zy.text}}
        </option>
    </select>


</p>

<script>
var vm = new Vue({
    el:'#test',
    data:{
        YX:[
            {
                text:'计信院',
                ZY:[
                    {text:'软件工程'},
                    {text:'计算机科学与技术'},
                    {text:"信息安全"},
                ]
            },
            { 
                text:'商学院',
                ZY:[
                    {text:'旅游管理'},
                    {text:'工商管理'},
                    {text:"行政管理"},
                ]
            },       
        ]
    },
    computed:{
        selection: function() {
            for (var i = 0; i < this.YX.length; i++) {
                if (this.YX[i].text === this.A) {
                    return this.YX[i].ZY;
                }
            }
        }
    }
});

Answer 5

没用过vue,不过个人觉得官方docs肯定能解决题主的问题 。