Vue.js 通过单击列表项（如v-model）进行绑定

目前我有一个下拉组件来选择本地化语言

从“../scripts/store/appConfig”导入{mapState}；
从“../components/queryUtils.js”导入{appendQueryString}；
导出默认值{
数据（）{
返回{
selectedLocale:“”，
};
},
计算：{
…地图状态({
locales:state=>state.locales，
localeLabels:state=>state.localeLabels，
}),
},
观察：{
selectedLocale（区域设置）{
const updatedQueryString=appendQueryString（{locale}）；
window.location.search=updatedQueryString；
},
},
};

地区：

[
{“value”：“en”，“label”：“English”}，
{“value”：“es_mx”，“label”：“Español”}，
{“value”：“fr_ca”，“label”：“Français”}
]

我正在尝试将下拉列表更改为导航菜单中的移动设备列表

以下是我的导航移动组件中的列表：

---

当前，下拉列表通过v-model更新所选语言。有没有办法通过单击列表项获得类似的功能？

我建议使用

而不是

，因为这些选项实际上并不代表链接。在任何情况下，添加一个

@click

处理程序就足够了

<li
    v-for="(subNavItem, index) in navItem.children"
    :key="index"
    class="navMobile__list__item"
>
    <button
        class="navMobile__list__item-button"
        @click="selectLanguage(subNavItem.value)"
    >            
        <span class="navMobile__list__item-label">{{ subNavItem.label }}</span>
        <span
            v-if="subNavItem.isEnabled"
            class="navMobile__list__item-icon-enabled"
        >
            <span class="icon icon--tick">
                <svg class="icon-inner">
                    <title>Enable</title>
                    <use xlink:href="#tick" />
                </svg>
            </span>
        </span>
    </button>
</li>

methods: {
    selectLanguage(value) {
        // Change language to indicated value
    }
}