Как отобразить ввод одним нажатием кнопки в Vue?

#vue.js #vuetify.js

Вопрос:

Я читал о текстовых полях, но не могу понять.. Я хочу иметь возможность вводить имя и возраст, а затем, когда я нажимаю кнопку «добавить», я хочу иметь возможность видеть имя и возраст, отображаемые ниже. Какой самый простой или лучший способ сделать это?

Мой код:

 <v-container>
<v-row>
  <v-col cols="12" sm="6" md="3">
    <v-text-field label="Name" solo></v-text-field>
  </v-col>
  <v-col cols="12" sm="6" md="3">
    <v-text-field label="Age" solo></v-text-field>
  </v-col>
  
  <div class="addbutton">
        <v-btn color="green darken-1" large v-on:click="add">Add</v-btn>
  </div>
</v-row>

Ответ №1:

Сначала вы должны привязать входные данные к данным компонента с помощью v-model.

скрипт:

 export default {
  data(){
    return {
      name: null,
      age: null
    }
  }
}

HTML:

 <v-col cols="12" sm="6" md="3">
  <v-text-field label="Name" solo v-model="name"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3">
  <v-text-field label="Age" solo v-model="age"></v-text-field>
</v-col>

Теперь вы можете отображать текущие входные значения: <p>{{ name ', ' age }}</p>

Если вы хотите показать / скрыть их с помощью кнопки, вы можете добавить свойство данных для хранения их состояния, создать метод для его переключения и привязать их видимость к свойству с помощью v-if:

скрипт:

 export default {
  data(){
    return {
      name: null,
      age: null,
      showValues: false
  },
  methods: {
    toggle() {
      this.showValues = !this.showValues
    }
  }
}

HTML:

 <v-row>
  <v-col cols="12" sm="6" md="3">
    <v-text-field label="Name" solo v-model="name"></v-text-field>
  </v-col>
  <v-col cols="12" sm="6" md="3">
    <v-text-field label="Age" solo v-model="age"></v-text-field>
  </v-col>
  
  <div class="addbutton">
        <v-btn color="green darken-1" large @click="toogle">Add</v-btn>
  </div>
  <p v-if="showValues">{{ name   ', '   age }}</p>
</v-row>

Ответ №2:

Сохраните переменные в данных вашего компонента vue и используйте их для визуализации

  <v-row>
  <v-col cols="12" sm="6" md="3">
    <v-text-field label="Name" solo></v-text-field>
  </v-col>
  <v-col cols="12" sm="6" md="3">
    <v-text-field label="Age" solo></v-text-field>
  </v-col>
  
  <div class="addbutton">
        <v-btn color="green darken-1" large v-on:click="add">Add</v-btn>
  </div>
<v-col cols="12" sm="6" md="3" v-if="render!==null">
    <p>{{ render.name }}</p>
    <p>{{ render.age }}</p>
</v-row>

<script>
    export default {
data(){
    return {
    name:null,
    age:null,
    render:null,
},

methods(){
    add(){
        const name = this.name;
        const age = this.age;
        this.render = {
            name,
            age
        }
    },
}

}

</script>