如何在VueJS材料上禁用< Material >中的<Material>

Question

当我单击<md-select>组件时，会显示<md-field>。

当我单击<md-select>的外部区域时，<md-field>组件将被关闭。

当我单击某个按钮时，我想关闭<md-select>组件。

如何添加自定义事件以关闭<md-select>组件？

这是select组件的文档链接。

Vue材料-选择

这是一个模板。

<md-field>
  <label for="movie">Movie</label>
  <md-select v-model="movie" name="movie" id="movie">
    <md-option value="fight-club">Fight Club</md-option>
    <md-option value="godfather">Godfather</md-option>
    <md-option value="godfather-ii">Godfather II</md-option>
  </md-select>
</md-field>

Answer 1

您可以添加一个按钮并添加单击事件。

<button @click="disableButtonClicked">Click to disable</button>

然后您可以更改组件的变量--让我们将其称为isDisabled

<md-field>
  <label for="movie">Movie</label>
  <md-select v-model="movie" name="movie" id="movie"  :disabled="isDisabled" ref="mdSelect">
    <md-option value="fight-club">Fight Club</md-option>
    <md-option value="godfather">Godfather</md-option>
    <md-option value="godfather-ii">Godfather II</md-option>
  </md-select>
</md-field>

或者您也可以使用它的引用，比如

this.$refs.mdSelect 

然后做你想要的行动。