单击单选按钮时，将其值传递给 vue 组件实例

Posted 2023-02-23

【中文标题】单击单选按钮时，将其值传递给 vue 组件实例

【英文标题】：When radio button is clicked pass it's value into vue component instance

【发布时间】：2020-01-10 19:43:23

【问题描述】：

我在 laravel 视图中有一个表单，其中有一个名为“tree-select”的 vue 组件实例，它执行一些 ajax 并生成一个下拉列表。 在同一个表单中，我有一个单选按钮。

我想要发生的是：单击单选按钮时，我想将单选按钮值发送到树选择组件实例中，其中 vue 实例方法将使用单选按钮的值过滤 ajax 结果.

下面是我目前拥有的视图代码的 sn-p。关于如何让组件实例监听单选按钮单击并获取其值的任何建议？

<div class="form-group">
    <label><input type="radio" name="status" value="previous">Previous</label>
</div>

<div class="form-group">
    <tree-select name="property_ids" action="/treeSelect"></tree-select>
</div>```

【参考方案1】：

您最好的方法是将单选按钮单击/值的结果存储在您的 Vuex 存储中。您在单选按钮更改时调度一个操作，这会更新存储以反映您设置的值。第二个组件应该使用计算属性从存储中读取您的状态并相应地更新。