更改 vue.js 中 "use-input" 的行为

Question

我将 vue.js 与 typescript 一起使用以创建一个输入字段，用户可以在其中 select 下拉菜单中的项目或实际输入一些自定义输入。有不同的用例：允许自定义输入或仅从下拉菜单（硬编码）输入。

我发现，我可以使用 "use-input" 来激活或停用键盘的用户输入。不幸的是，到目前为止，我只能通过在 <q-select></q-select> 中添加 "use-input" 或完全删除它来控制此行为。相反，我希望能够通过一些标志来控制输入行为，例如use-input="False"。我试过了，得到了错误信息：

[Vue warn]: Invalid prop: type check failed for prop "useInput". Expected Boolean, got String with value "False".

现在我假设属性 "useInput" 实际上可以采用布尔值，但不知何故我没有找到正确的语法来实际使其工作。另外，我没有找到任何关于 useInput 的文档，所以也许这里有人已经使用过它？

这里是一小段代码，希望这足以解决问题：

<template>
  <q-item
    class="item"
  >
    <div
      class="item-content column"
      style="width: 100%;"
      @click.passive="click"
    >
      <q-select
        use-input="False"
        @input="inputChanged"
      >
  </q-select>
</template>

Answer 1

你应该做

:use-input="false"

在模板中的属性前添加 : 时，vue 知道您正在输入 javascript。这意味着你可以添加一个布尔值、方法、对象、数组等，如果你想添加一个字符串，你可以像这样将它包装在 '' 中：

:some-attribute="'some string'"

还要记住，true 和 false 不是大写的。

最后，您还可以添加模板文字，这样您就可以像这样将字符串与 javascript 混合使用：

:some-attribute="`My name is ${myName}`"

你可以读一读here，它非常有用。

更改 vue.js 中 "use-input" 的行为

Change behavior of "use-input" in vue.js

typescript

vue.js

quasar-framework