Vue modal access to input field

Ionic Framework Ionic Vue
1

how do I retrieve the value of an input field in my template?

I can document.getElementById()
but compile fails as there is no ‘value’

i shouldn’t have to do that anyhow
i put the property in the field {{propname}}

the property did not change when overtyped
or, the compiler doesn’t know

      modalController.dismiss({action: 'save', address: propname });

none of the samples show input fields

2

So you wouldn’t be using something like getElementById in Vue. Since Vue has it’s own way of handling how values get set on bindings, you’d use something like v-model to handle it

In this case, you’d do something like…

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true">
      <ion-list>
        <ion-item>
          <ion-input v-model="inputVal"></ion-input>
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonList,
  IonItem,
  IonInput,
} from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Home',
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonList,
    IonItem,
    IonInput,
  },
  data(){
    return{
    inputVal: "foo"
      }
  },
  setup() {
    return {}
  }
});
</script>

I’d highly suggest taking a look at the Vue docs and getting a bit more familiar with Vue’s concepts.

3

I have a whole video series on managing a list of data using modal dialogs to create list entries and edit list entries. Passing data in, handling the user canceling the input, and more.

Also, you really need to show more code when asking questions, it helps those who want to help provide a more detailed and specific response

4

as per a prior request i posted the project to github

anyhow, the problem is that I don’t understand the vue data model

there are 3 separate places data is defined

props
data()
and setup()

apparently NONE of them talk to each other

i pass in parm as use it in the

<ion-input>{{parm}}</ion-input>

that works…
but the parm is not updated by user editing

i add v-model=??? some data item… but that item overwrites the value of the property

but I don’t know which one of the data containers to define the variable for v-model in
and how to address it

then when the button on the modal is pressed i want the current value of the input field
which v-model (like angular) should give me… but unless I type in the field it doesn’t pass back the initial value…
(and i shouldn’t have to manually place the parm value into the data element for the v-model)

so, I can;t tell if I have a programming problem,
and data problem
or a bug
or a limitation in this release (as I see there was a problem with ion-input and v-model before

5

my modal component, similar design as the angular version of same

<template><!--
  Generated template for the AddressModalPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-page>
<ion-header>

  <ion-title>
    <ion-title style="text-align:center;">Remote Server Address configuration</ion-title>
  </ion-title>

</ion-header>

<ion-content >
			<p> please enter the address of the remote mirror</p>
      <ion-list>
      <ion-item >
        <ion-label >Address    </ion-label>
          <ion-input type="text" v-model="ouraddress" placeholder="mirror_address"></ion-input>
      </ion-item>

       <button ion-item @click="itemSelected('save')">
           Save
       </button>
       <button ion-item @click="itemSelected('delete')">
           Delete
       </button>
       <button ion-item @click="itemSelected('cancel')">
           Cancel
       </button>
		</ion-list>
</ion-content>
</ion-page>
</template>
<script lang='ts'>

import { modalController, IonHeader, IonTitle, IonContent,IonItem,IonLabel,IonList, IonPage, IonInput}  from '@ionic/vue';
import { defineComponent } from 'vue';

export default  defineComponent({
  name: 'AddressModal',
  components: { IonHeader, IonTitle, IonContent,IonItem,IonLabel,IonList, IonPage,IonInput},
  methods:{
    itemSelected(parm: string){

        if(parm=='cancel')
          modalController.dismiss({action:'cancel'});
        else if(parm=='delete')
          modalController.dismiss({action:'delete'});
        else {
          console.log("ouraddress='"+this.ouraddress+"'")
          modalController.dismiss({action: 'save', address: this.ouraddress });
        }
    }
  },
  props: {
    propAddress: {
         type: String,
         default: '1234567'
       }
  },
  data(){
    return {
      'ouraddress':this.propAddress
    };
  }
});
</script>

this FINALLY works, , missing close brace and ;