在Vue中直接更改v-model时，屏幕上Vuetify组件中的值不会刷新

Question

在我的示例 Vue 组件中（我使用的是 Vue 2 和 Vuetify 1），我有一个输入字段，用户可以在其中输入数据，但我希望能够以编程方式将输入字段中的数据更改为所需的值。

在这个例子中，我希望输入字段的值始终为“1”，无论用户在输入字段中输入什么（我知道这是毫无意义的，但这只是一个最低限度的工作示例，以更多地展示我的问题）复杂的用例）。

这是一个例子：

<script>
    export default
    {
        data() { return { v: null } },
        computed:
        {
            c:
            {
                get() { return this.v; },
                set(v) { this.v = "1"; }
            }
        }
    };
</script>

<template>
    <v-text-field v-model = "c" />
</template>

但是，这个例子不起作用。用户在输入字段中输入的任何内容都会保留在输入字段中。 Setter 确实会触发，并且

v

属性的值确实会发生变化。但在屏幕上，文本字段中的值不会改变。

这里有什么问题？

注意：

我已经看到了类似问题的答案，其中建议使用

set

方法来设置

v-model

的值。但是，这个解决方案对我不起作用。我尝试在

return { o: { v: null }}

部分中使用

data

并在

set(v) { this.$set(this.o, "v", "1"); }

部分中使用

computed

，但就我而言，它没有解决问题。

Answer 1

v-model

用于双向绑定。您的问题描述清楚地表明您只需要单向绑定（使用我们的值并忽略任何传入值更改）。只需将

v-model

替换为

:value

并直接绑定数据变量即可。您可以删除可写的计算。

<script>
  export default {
    data() {
      return { v: 1 }
    },
  }
</script>

<template>
  <v-text-field :value="v" />
</template>

如果您稍后想要挂钩用户尝试的值更新，您可以在 Vuetify 组件上添加事件侦听器

@update:model-value

<script>
  export default {
    data() {
      return { v: 1 }
    },
    methods: {
      updateResponse(userValue) {
        console.log('do something here')
      },
    },
  }
</script>

<template>
  <v-text-field :value="v" @update:model-value="updateResponse" />
</template>