为什么 v-icon 不显示在 v-text-field 内？

Question

你能告诉我为什么不显示 v-text-field 右侧的图标吗？ 我想在你点击图标时打开日历。

codepen

<div id="app">
  <v-app id="inspire">
    <v-menu>
      <template v-slot:activator="{ on }">
        <v-text-field label="Hello world" style="max-width: 200px">
          <!--The icon is not displayed-->
          <v-icon v-on="on" color="primary" dark>event</v-icon>
        </v-text-field>
      </template>
      <v-date-picker>
      </v-date-picker>
    </v-menu>
  </v-app>
</div>

附： 这是一个很好的例子。不是我的。 Codepen

Answer 1

HTML input 字段为空 https://www.w3schools.com/tags/tag_input.asp

有一个属性可以在 Vuetify 的文本字段中添加和添加图标：https://vuetifyjs.com/en/components/text-fields/#icons

您只需添加它： <v-text-field label="Hello world" style="max-width: 200px" append-icon="event">

Answer 2

我设法做到了。我在没有激活器模板的情况下做到了这一点。 codepenvuetify

<div id="app">
  <v-app id="inspire">
       <v-text-field 
        label="Hello world"
        style="max-width: 200px"
        append-icon="event"
        @click:append="show">
        </v-text-field>
    <v-menu
     v-model="menu"
     :position-x="x"
     :position-y="y"
     absolute >
       <v-date-picker />
    </v-menu>
  </v-app>
</div>


show (e) {
        console.log(123);
        e.preventDefault();
        this.menu = false;
        this.x = e.clientX;
        this.y = e.clientY;
        this.$nextTick(() => {
         this.menu = true
      })
    },