时间戳

首页 > 解决方案 > 带有 Ionic 5 的 Vue.js：不工作的指令

javascript - 带有 Ionic 5 的 Vue.js：不工作的指令

问题描述

所以我基本上有一个问题，例如 Vue.js 指令v-model不适用于 ionic 5。我使用 Ionic 4 遵循 youtube 上的指南，但它对 Ionic 5 不起作用。例如，v-model我需要做的工作写下这段代码：

<ion-input :value="name"
                @ionInput="name = $event.target.value;"
                @ionClear="searchCleared($event)" type="text" 
                placeholder="Enter name"></ion-input>
         <ion-label>{{name}}</ion-label>

（我已经添加了，ion-label所以我可以在输入字母时查看值是否在变化）。在脚本中：

<script>
import { IonContent, IonPage} from '@ionic/vue';
import { defineComponent } from 'vue';
import axios from 'axios';
import {alertController} from '@ionic/vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonPage
  },

  data(){
    return{
      name: ""
    }
  },

  methods: {
..........

如果我这样写：

<ion-input v-model="name" type="text" placeholder="Enter name"></ion-input>
<ion-label>{{name}}</ion-label>

它没有按预期工作

谢谢！

标签： javascriptvue.jsionic-framework

解决方案

<ion-item>
  <ion-label>An Input Field</ion-label>
  <ion-input v-model="inputField" type="text"></ion-input>
</ion-item>

你可以使用v-model最新版本的离子

推荐阅读