如果值更改，vue 2 如何更新 v-model？答案

【问题标题】：vue 2 how to update v-model if value is changed?如果值更改，vue 2 如何更新 v-model？
【发布时间】：2017-09-09 12:03:25
【问题描述】：

我有几张卡片像单选按钮一样工作。

<div class="card">
    <input
       checked=""
       class="card__input"
       type="radio"
       v-model="templatePicked"
       :value="template.value"
       name="template"
       :id="template.id"
     >
    <label :for="template.id" class="card__label"></label
    <ui-select
       name="version"
       placeholder="Select a version"
       :keys="{ label: 'text', value: 'value' }"
       :options="templateVersions"
       v-model="template"
     ></ui-select>
</div>

因此，当我们单击选择项目（在 ui-select 中）时，我们会更新 id 和 value 的卡片单选按钮。问题是，如何更新 templatePicked？因为现在它只有在我单击单选按钮时才会更新。

附言我使用 Vue 2.2.6。选择组件：https://josephuspaye.github.io/Keen-UI/#/ui-select 它有 @change 事件，但我不明白如何在我的情况下使用它。

附言它实际上在 vue 1.0.28 中完美运行，我在组件上使用了:value.sync="ubuntu"。

请帮忙！

【问题讨论】：

嗨，@select 事件可能对此很有用，例如：@select="setTemplatePicked(template)"，然后在 setTemplatePicked 方法中执行所选模板的逻辑。
@M.Suurland 伙计，你是对的！现在可以了，谢谢。你可以写答案，我会把它标记为最佳。但是为什么当我在 ui-select 中选择另一个选项并且单选按钮变为未选中时？
试着把 {{ templatePicked }} 放到你的 html 中，看看 templatePicked 的值是如何变化的，我猜你在哪里设置错了
@M.Suurland 是的，我解决了这个问题。请最后一个问题是，在我的情况下，如何将默认值设置为 ui-select？因为我不能只在模型或值中写入值，因为数据是动态的。但我想在我的 templateVersions 数组中设置第一个 object.value。
您的意思是要将第一个选项（模板）添加到 templateVersions？

标签： javascript data-binding vue.js vuejs2

【解决方案1】：

你可以监听@select 事件（当一个项目被选中时）或者例如@focus。有关更多选项，请参阅https://josephuspaye.github.io/Keen-UI/#/ui-select（事件）。

<ui-select
   name="version"
   placeholder="Select a version"
   :keys="{ label: 'text', value: 'value' }"
   :options="templateVersions"
   v-model="template"
   @select="setTemplatePicked(template)"
 ></ui-select>

接下来添加一个设置所选模板的方法（例如 setTemplatePicked）。

【讨论】：

补充一点说明：vuejs.org/v2/guide/…
点击即可。但我注意到，如果我选择一个选项作为默认选项，那么如何从模板中获取数据并设置为 templatePicked？最初，当页面加载时