javascript 检测Vue中的模型更改是由用户交互触发还是通过编程触发

atmip9wb 于 2023-05-16 发布在 Java

关注(0)|答案(1)|浏览(193)

我对Vue的React性和我在Quasar 2中的自定义组件有一些问题。以下是基本用例：

该组件提供了两个单选按钮和一个选择下拉菜单。
每当用户更改其中一个无线电选择时，选择下拉菜单将重置为null。

这个很好用。但是，用户也可以单击一个按钮，该按钮将用单选按钮和选择下拉菜单的新值覆盖任何选择。问题来了此按钮将替换组件的v-model。然后，单选按钮的监视器将触发并重置选择下拉列表。

示例：

用户选择“国内”和“选项1”，然后点击“覆盖”按钮。这将导致“国际”与“选项2”，但作为观察者火灾，“选项2”将被重置。
以下是StackBlitz：
demo

来源：https://stackoverflow.com/questions/76239872/detect-if-model-change-in-vue-was-triggered-by-user-interaction-or-programatical

1条答案

按热度按时间

a8jjtwal1#

您可以在单击按钮时设置overwrite属性：

function overwriteModel() {
  model.value = {
    origin: 'international',
    selectedOption: 'Option 2',
    overwrite: true
  };
}

并在watcher中重置：

watch(
  () => localModel.value.origin,
    (newOrigin, oldOrigin) => {
      if (newOrigin !== oldOrigin && !localModel.value.overwrite) {
        localModel.value.selectedOption = null;
      } localModel.value.overwrite = false
  }
);

在domestic q-radio中：

<q-radio 
  v-model="localModel.origin" 
  val="domestic" 
  label="Domestic"   
  @click="localModel.overwrite = false" 
/>

DEMO

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 检测Vue中的模型更改是由用户交互触发还是通过编程触发

1条答案

相关问题

热门标签

最新问答