Pu sh компонент в vue - PullRequest
Новая
       48

Pu sh компонент в vue

0 голосов
/ 14 апреля 2020

Я пытался набрать sh текстовое поле при каждом нажатии кнопки «Добавить». Это мой код до сих пор. 

<v-container fluid>
        <v-row>
          <v-col cols="7">
            <v-row class= "mx-1 my-1">
              <v-text-field outlined label="Test 1" v-model="test1"></v-text-field>
            </v-row>
          </v-col>
          <v-col cols="5">
            <v-row class= "mx-4 my-1">
              <v-text-field type="number" outlined label="Test 2" v-model="test2"></v-text-field>
            </v-row>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="12">
            <v-row class= "mx-1 my-n8">
              <v-btn
              @click="doWork()" 
              width = 100%
              small
              outlined
              color="#0000b0" 
              >
              <v-icon dark>mdi-plus</v-icon></v-btn>
            </v-row>
          </v-col>          
        </v-row>
      </v-container>

Вот мой javascript

<script>
export default {
    data () {
      return {
        test1:'',
        test2:''
      }
    },
    methods: {
      doWork () {
        //just for debugging purposes
        console.log(this.valor)
        console.log(this.precio)
      }
    }

}
</script>

Что я должен добавить в метод "doWork ()", чтобы добавить sh другую пару текстовых полей

Заранее спасибо <3 </p>

1 Ответ

1 голос
/ 14 апреля 2020

Вы можете преобразовать свои поля в массив полей: 

data () {
  return {
    inputs: []
  }
}

Ваш метод addWork становится методом, который pu sh создает новое значение в этом входном массиве: 

methods: {
  doWork () {
    this.inputs.push({
      label: 'Test',
      value: ''
    })
  }
}

И вы выводите эти входы с директивой v-for: 

<v-row>
  <v-col cols="2" v-for="(input, index) in inputs" :key="index">
    <v-row class="mx-1 my-1">
      <v-text-field outlined :label="input.label" v-model="input.value"></v-text-field>
     </v-row>
   </v-col>
 </v-row>

Рабочий пример: https://codesandbox.io/s/festive-dream-gbo6t?file= / src / App. vue

...