[vue.js] 根据对应的选择内容，选中对应的radio按钮

开发中遇到一个内容，当你选中一个列表内容时，radio也要对应的进行选中。现已解决。于是贴一个例子出来和大家分享

 

 HTML：

<div class="panel-body" id="app" v-cloak>
    <div class="col-xs-6 col-md-5">
        <div class="custom_bg">
            <ul>
                <li v-for="menu in menus">
                    <a href="javascript:void(0);" v-on:click="select($index)"><i class="fa fa-bars" aria-hidden="true"></i> {{menu.title}}</a>
                    <ul>
                        <li v-for="subMenu in menu.subMenus">
                            <a href="javascript:void(0);" v-on:click="select($parent.$index, $index)">{{subMenu.title}}</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-7">
        <form class="form-horizontal">
           
            <div class="form-group">
                <label class="col-sm-2 control-label">菜单动作:</label>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="0"  v-model="currentNode.type" /> 链接
                    </label> <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="1"  v-model="currentNode.type" /> 触发关键字
                </label>
                </div>
            </div>
        </form>
    </div>  
</div>

JS：

Vue.config.debug = true
var vm = new Vue({
    el: '#app',
    data: {
        selected: -1,
        selectedSub: -1,
        currentNode: {
        	title: "",
            type: null,
        },
        menus: [
            {
                "title": "菜单名称1",
                "type": 0,
                "subMenus": [
                    {"title": "子菜单1-1", "type": 0},

                    {"title": "子菜单1-2", "type": 1},

                ]
            },
        ]
    },
    computed: {
        selectedItemType: function () {
            const currentSelect = this.currentSelect()
            if(!currentSelect) return null
            return currentSelect.type
        },
    },
    methods: {
     select: function (parentIndex = -1, childIndex = -1) {
            this.selected = parentIndex
            this.selectedSub = childIndex
            
            this.currentNode = { 
              title: this.selectedItemTitle,
                type: this.selectedItemType,
                value: this.selecetdItemValue
            }
        }, 
       currentSelect: function() {
            if (this.selectedSub === -1) {
                return this.menus[this.selected]
            }
            return this.menus[this.selected].subMenus[this.selectedSub]
        }, 
    }
});

或者大家可以直接在编辑器中进行查看。https://jsfiddle.net/monobright/s02ocme3/3/?utm_source=website&utm_medium=embed&utm_campaign=s02ocme3
主要的功能点就是这个了，各位也可以根据需求进行相应的更改(*^▽^*)