Vuetify 文本字段不会使用计算属性

Question

我想要一个带有标签的可清除 v-text-field，以显示基于另一个属性的计算字符串属性（在此简化示例中为布尔值）。

最初有效，显示正确的默认字符串值。如果我使用 v-text-field 组件外部的按钮反转布尔值，则会按预期显示下一个正确的字符串值。但是，如果我使用 v-text-field 中的清除按钮来反转布尔值，则 v-text-field 会在焦点丢失时清除并使用输入字段中的标签，因此不会使用预期的字符串值。

输入：

<v-text-field  :value="text" label="Just a label" clearable  @click:clear="booleanModel = true;"></v-text-field>

计算属性:

text: function() {
      if(this.booleanModel) {
        return 'Its on'
      } else {
      return 'Default text';
      }
    }

据我通过 vue 开发工具所见，v-text-field 中的状态是相同的。怎么会这样，如何避免？

请参考这个例子：https://codepen.io/fasterlars/pen/RwKrzXZ?editors=1010

Answer 1

当您点击清除按钮时，booleanModel 的值不会改变。您需要更新 @click:clear = "booleanModel = false;".

此外，在您的文本字段中添加一个 :key="booleanModel，这将确保每当 booleanModel 的值更改时，它将再次重新呈现 v-text-field 组件。

Answer 2

老实说，您的用例看起来很奇怪，但是...

问题是 v-text-box 有一些内部状态（根据源代码注释使其在没有模型的情况下工作）并且在 clear 图标上单击它会将其设置为 null 但它在 nextTick - source. This is little bit strange but they probably has some reasons 中这样做...

因此，如果您不想真正清除内容而是将其设置为其他内容，请不要使用默认的“可清除”功能并改用 append 插槽：

<v-text-field :value="text" label="Just a label">
  <template v-slot:append>
    <v-icon @click="booleanModel = true">clear</v-icon>
  </template>
</v-text-field>

Vuetify 文本字段不会使用计算属性

Vuetify text-field won´t use computed property

vue.js

vuetify.js

Vuetify 文本字段不会使用计算 属性

Vuetify text-field won´t use computed property

vue.js

vuetify.js

Vuetify 文本字段不会使用计算属性